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

Question

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

所以我做了这些步骤：

npm eject
npm install sass-loader node-sass --save-dev
打开 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配置

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

将/\.scss$/,添加到url加载器中的exclude数组，更新后看起来像这样：

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

添加 SASS/SCSS 加载程序：

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

Answer 2

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

Answer 3

使用 Sass 样式而不弹出

1) 安装考拉

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

2) 添加您的 src 文件夹

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

3) 参考 CSS 文件

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

import './style.css';

Answer 4

第 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 5

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

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

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

create-react-app with sass not loading styles

reactjs

webpack

create-react-app