使用sass而不是加载样式的create-react-app

Question

我正在尝试为create-react-app添加sass/scss支持.

所以我做了以下步骤:

1. npm eject
2. npm install sass-loader node-sass --save-dev

3. 选择webpack.config.dev.js文件并将其添加到加载器部分:

   {
       test: /\.scss$/,
       loaders: ["style", "css", "sass"]
   },
   

在我的app.js文件中,我引用了一个scss文件: import './css/app.scss';

当我运行npm start所有编译没有错误但应用程序加载没有样式.

我错过了什么？

Answer 1

我刚刚经历过这个,似乎有很多人失去了或找不到合适的答案.这就是我做的:

控制配置

npm run eject

运行此命令会将所有配置文件和传递依赖项(Webpack,Babel,ESLint等)复制到项目中,因为您注意到npm模块中名为react-script的所有内容.不要直接修改此包!

安装sass编译器和webpack加载器

npm install sass-loader node-sass --save-dev

此时,您必须安装sass编译器和webpack加载器作为开发依赖项.

修改webpack配置

1. 打开config\webpack.config.dev.js.

2. 添加/\.scss$/,到url加载器中的exclude数组,更新后它将如下所示:

   exclude: [
       /\.html$/,
       /\.(js|jsx)$/,
       /\.css$/,
       /\.json$/,
       /\.svg$/,
       /\.scss$/, //Add this line
   ],
   

3. 添加SASS/SCSS加载程序:

   {
       test: /\.scss$/,
       loaders: ['style', 'css', 'sass']
   },