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

Question

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

所以我做了这些步骤：

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 等）直接复制到您的项目中，正如您在名为 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']
   },
   

Answer 2

第 1 步：

npm run eject

现在配置文件将显示在项目文件夹中

第 2 步： 安装 sass 编译器和 webpack 加载器

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

在 config\webpack.config.dev.js 将 /.scss$/ 添加到 exclude 数组

第 3 步： 在 rules 数组中添加下面的加载器（应该在文件加载器之前添加）

  {
            test: /\.scss$/,
            loaders: [
              require.resolve('style-loader'),
              require.resolve('css-loader'),
              require.resolve('sass-loader')
            ]
  }

然后启动你的应用程序。

您可以将现有的 css 文件重命名为 scss 并工作

Answer 3

我在阅读 documentations 时遇到了同样的问题。

Unitl 我发现使用 create-react-app 创建的项目中的 README.md 文件以另一种方式记录了它并且它有效。我认为依靠该自述文件（随您创建的项目提供）是更好的选择。

Answer 4

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

Answer 5

在不弹出的情况下使用 Sass 进行样式设计

1) 安装考拉

Koala 是一个 sass、less 等编译器。为此，您可以使用您选择的任何工具。

2) 添加您的 src 文件夹

将包含所有 SCSS 文件的源文件夹添加到 Koala。它将监视对您的 Sass 文件的任何修改并立即生成编译后的 CSS 版本。

3) 参考 CSS 文件

在你的项目中直接使用 Koala 生成的 CSS 文件。

import './style.css';