1.安装sass
npm i sass-loader --save-dev
2.安装resource依赖
npm install sass-resources-loader -D
3.安装完成后,发现通过create-react-app下载的脚手架项目没有webpack.config,这时去node_module下找react-scripts/config/webpack.config.js即为该项目的webpack文件,找到exclude: sassModuleRegex,修改如下即可完成全局配置公用样式
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'sass-loader'
).concat({
loader:'sass-resources-loader',
options:{
resources:[
// 按照文件路径填写
path.resolve(__dirname,'./src/styles/sassConfig.scss')
]
}
}),
4.安装antd依赖,按需饮用
cnpm install antd --save
cnpm install babel-plugin-import --save-dev
5.配置webpack.config,搜索babel-loader,在plugins里添加如下内容
[
"import",
{libraryName:'antd',style:'css'}
],