用create-react-app创建项目默认是没有scss预处理器的,需要我们去配置,
在根目录下:cnpm install --save-dev node-sass sass-loader
安装完成后,进入node_modules->react-scripts->config->webpack.config.dev.js(开发环境用的js)和webpack.config.prod.js(生产环境用的js)
{
// Exclude `js` files to keep "css" loader working as it injects
// it's runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.js$/, /\.html$/, /\.json$/,/\.scss$/], // 添加
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
{ // 添加进去
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
},
],
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
/\.scss$/], // 添加
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
{ // 添加进去
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
},
],
},
// ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader.
上面两个js都要改,完成后再在终端重新运行
npm start
大功告成!!