Ant Design 3.X 主題修改

趙趙發表於2018-07-04


由於 antd 升級到3.6.5後主要字型變為14px,不夠精緻，所以需要對主題進行修改。而且掌握修改方法後可以對顏色進行定製，而不侷限於提供的藍色系。但是官網給出的說明比較簡單，漏了很多說明，參考社群其他實踐，現在對主題修改進行一下總結。

1.升級 antd 到3.x
2.安裝 babel-plugin-import 以只打包 antd 的樣式
npm install babel-plugin-import --save-dev
3.安裝 less-vars-to-js 用來把 less 檔案轉換為字串並且返回一個物件
npm install less-vars-to-js --save-dev
4.less 保持在2.8以下，高版本會報錯
5.安裝 less-loader css-loader style-loader
6.配置 .babelrc

{  "presets": ["es2015", "stage-1", "react"],  "plugins": [    "transform-runtime",    "transform-decorators-legacy",    ["import", { "libraryName": "antd", "style": true }]  ]}複製程式碼
7.在 src 目錄建立一個 .less 檔案，這裡來寫你自己的樣式用來覆蓋 antd 的樣式。

@primary-color:#C890ff;@font-size-base : 12px;@padding-lg    : 16px; // containers@padding-md    : 12px; // small containers and buttons@padding-sm    : 8px; // Form controls and items@padding-xs    : 4px;  // small items
複製程式碼
8.配置 webpack
獲取上一步的配置

const fs = require('fs');const themeVariables = lessToJs(  fs.readFileSync(path.join(__dirname, './src/ant-theme-vars.less'), 'utf8'));複製程式碼
原來的 less-loader 配置不用動，新加一個 less-loader 配置

{        test: /.less$/, // antd 中的less        include: path.resolve(__dirname, 'node_modules/antd'), //這個路徑要寫準確，否則報錯        loaders: [          'style-loader',          'css-loader', //編譯less檔案的loader並開啟css-modules功能          `less-loader?{"modifyVars":${JSON.stringify(themeVariables)}}`        ] },複製程式碼
另外webpack2.0配置語法稍有不同，具體語法參考官網。


相關文章