create-react-app with sass not loading styles

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']
   },
   

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用Sass进行样式而不会弹出

1）安装考拉

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

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 $ / 添加到排除数组

第3步： 在规则数组中添加到加载器下方（应在文件加载器之前添加）

  {
            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文件以其他方式对其进行了记录，并且可以正常工作。我认为依靠自述文件（随您创建的项目一起提供）是更好的选择。