React+antd 項目配置antd 的css文件(babel-plugin-import配置)

1.安裝antd 後,執行 yarn add react-app-rewired customize-cra

2.在package.json文件中作出如下修改

/* package.json */

"scripts": {

- "start": "react-scripts start",

+ "start": "react-app-rewired start",

- "build": "react-scripts build",

+ "build": "react-app-rewired build",

- "test": "react-scripts test",

+ "test": "react-app-rewired test",

}

3.根目錄創建一個 config-overrides.js 用於修改默認配置。

module.exports = function override(config, env) {

// do stuff with the webpack config...

return config;

};

4.安裝babel-plugin-import ,執行 yarn add babel-plugin-import

config-overrides.js文件改爲

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(

fixBabelImports('import', {

libraryName: 'antd',

 libraryDirectory: 'es',

 style: 'css',

}),

);

6.在項目中使用antd控件

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章