antd按需引入樣式無效
##最近在專案中上antd時，發現了一個如果同時引入css modules和按需引入antd，antd樣式無效的問題。
如果你的專案中只是引入antd，那麼根據官網步驟配置webpack應該是不會有問題的。
###1. 首先在引入antd之前，我在webpack中已經配置了css modules(css modules怎麼使用這裡我就不多說了)，現在我的webpack是這樣的： ``` module:{ rules:[
{//ES6、JSX處理 test:/(\.jsx|\.js)$/, exclude: /node_modules/, loader:'babel-loader', query: { presets:["env", "react"], }, },
{//CSS處理 test: /\.css$/, loader: "style-loader!css-loader?modules", exclude: /node_modules/, }, ] } ```
###2. 根據antd design 官網按需引入antd - 首先安裝 babel-plugin-import。 npm `npm install babel-plugin-import --save 或 cnpm install babel-plugin-import --save` yarn `yarn add babel-plugin-import`
- babel-loader的query/options欄位加入 ``` plugins: [ [ "import",{libraryName: "antd", style: 'css'}] // antd按需載入 ] ```
- webpack中plugins欄位這樣配置: ``` module:{ rules:[
{//ES6、JSX處理 test:/(\.jsx|\.js)$/, exclude: /node_modules/, loader:'babel-loader', query: { presets:["env", "react"], plugins: [ [ "import",{libraryName: "antd", style: 'css'}] // antd按需載入 ] }, },
{//CSS處理 test: /\.css$/, loader: "style-loader!css-loader?modules", exclude: /node_modules/, }, ] } ``` - 測試 `import { Button } from 'antd'` 使用Button測試antd的引入發現樣式與官網Button的樣式不一致。
###3. 解決辦法 - 如果你同時需要使用antd 和 css modules，處理樣式時，需要分別處理。 webpack加入以下處理： ``` {//antd樣式處理 test:/\.css$/, exclude:/src/, use:[ { loader: "style-loader",}, { loader: "css-loader", options:{ importLoaders:1 } } ] }, ```
- 最後webpack中是這樣的： ``` module:{ rules:[
{//ES6、JSX處理 test:/(\.jsx|\.js)$/, exclude: /node_modules/, loader:'babel-loader', query: { presets:["env", "react"], plugins: [ [ "import", {libraryName: "antd", style: 'css'} ] //antd按需載入 ] }, },
{//CSS處理 test: /\.css$/, loader: "style-loader!css-loader?modules", exclude: /node_modules/, },
{//antd樣式處理 test:/\.css$/, exclude:/src/, use:[ { loader: "style-loader",}, { loader: "css-loader", options:{ importLoaders:1 } } ] }, ] } ```
好了，現在可以愉快是使用antd元件開設計的元件了。