如何使編輯工作對組件庫css文件起作用？

Question

我正在使用一些組件庫來反應，例如antd, material-ui等。我需要修改一些組件css。例如，我擡頭看了antd的目錄，並找到了node_modules\antd\dist下的css文件。有幾個文件以及antd.css和antd.min.css還有一個名爲antd.less的文件。 我的問題是我要對css進行更改的文件是什麼？非常感謝幫助。

Answer 1

很難說但可能是antd.less。

我強烈建議在localcss文件中覆蓋css而不是修改node_modules。維護起來會更方便。這將成爲生產中的一個痛苦，或者如果你想更新你的模塊。被認爲是不好的做法。

如果您確實想在模塊中直接編輯它，請將模塊克隆到您的代表中。出於同樣的原因，不要將它留在node_modules中。

Answer 2

覆蓋較少變量（替代方式）＃

通過較少的定義文件覆蓋變量。

創建一個如下所示的獨立少文件，並將其導入到項目中。

@import "~antd/dist/antd.less"; // import official less entry file 
@import "your-theme-file.less"; // override variables here 

缺省變量 https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less