create-react-app with sass 不加载样式

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 等）复制到您的项目中，正如您注意到的，所有这些都在名为 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 数组，更新后将如下所示：

    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

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

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

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

在config\\webpack.config.dev.js 中添加/.scss$/到排除数组

第三步：在规则数组中添加下面的loader（应该在file-loader之前添加）

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

并启动您的应用程序。

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

Answer 3

我在阅读它的文档时遇到了同样的问题。

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';