reactjs - 带有 sass 的 create-react-app 不加载样式

Question

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

所以我做了这些步骤:

1. npm 弹出
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 pop

运行此命令会将所有配置文件和传递依赖项(Webpack、Babel、ESLint 等)复制到您的项目中，正如您注意到名为 React-script 的 npm 模块内的所有内容一样。不要直接修改这个包!

安装 sass 编译器和 webpack 加载器

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

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

修改webpack配置

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

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

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

3. 添加 SASS/SCSS 加载器:

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