1、安装 sass-resources-loader
npm i sass-resources-loader --save-dev
2、找到 webpack.config.js,两种选择
(1)暴露配置文件执行 npm run eject,此时会在根目录生成 config 文件夹,里面包含webpack.config.js 配置文件。 (多人项目建议选择执行此命令)
(2)直接修改 node_modules ==》 react-scripts ==》webpack.config.js。 (注意:此文章是采用的这种方式修改的 webpack.config.js)
注意:修改的node_modules/reacr-scripts/config/webpacl.config.js , …/…/…/ 定位到根目录下层级下。如果是npm run eject 的话,需要对应看目录的路径。
3、修改 webpack.config.js
找到以下代码,大约在507行。
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'sass-loader'
),
sideEffects: true,
}
在 getStyleLoaders() 后面添加如下代码:
.concat({
loader: 'sass-resources-loader',
options: {
resources: [
// 这里按照你的文件路径填写
path.resolve(__dirname, './../src/common.scss')
]
}
})
4、最终代码如下,需要执行npm start 重新启动项目
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'sass-loader'
).concat({
loader: 'sass-resources-loader',
options: {
resources: [
// 这里按照你的文件路径填写../../../ 定位到根目录下, 可以引入多个文件
path.resolve(__dirname, '../../../src/scss/common.scss'),
path.resolve(__dirname, '../../../src/scss/skin.scss')
]
}
}),
sideEffects: true,
},
需要执行npm start 重新启动项目