将Sass（.scss）添加到弹出的create-react-app配置 [英] Add Sass (.scss) to ejected create-react-app config

问题描述

我想在我的应用程序中添加 .scss 支持，该支持是使用create-react-app创建的。

I want to add .scss support in my app, which was created using create-react-app.

我确实弹出了 npm run弹出并安装了必要的依赖项： npm install sass-loader node-sass --save-dev

I did eject npm run eject and installed necessary dependencies: npm install sass-loader node-sass --save-dev

内部 config / webpack.config.dev.js 我向加载程序添加了以下代码段：

Inside config/webpack.config.dev.js I added to the loaders this snippet:

{
   test: /\.scss$/,
   include: paths.appSrc,
   loaders: ["style", "css", "scss"]
},

因此，加载程序数组的开头现在看起来像这样：

So the beginning of the loaders array now look like so:

loaders: [
      // Process JS with Babel.
      {
        test: /\.(js|jsx)$/,
        include: paths.appSrc,
        loader: 'babel',
        query: require('./babel.dev')
      },
      // "postcss" loader applies autoprefixer to our CSS.
      // "css" loader resolves paths in CSS and adds assets as dependencies.
      // "style" loader turns CSS into JS modules that inject <style> tags.
      // In production, we use a plugin to extract that CSS to a file, but
      // in development "style" loader enables hot editing of CSS.
      {
        test: /\.css$/,
        loader: 'style!css!postcss'
      },
      // LOAD & COMPILE SCSS
      {
        test: /\.scss$/,
        include: paths.appSrc,
        loaders: ["style", "css", "scss"]
      },

当我尝试导入scss文件时，现在在我的jsx中：

Now in my jsx when I try to import scss file:

import './assets/app.scss';

我收到一个错误：

未捕获的错误：找不到模块 ./assets/app.scss

Uncaught Error: Cannot find module "./assets/app.scss"

所以我的配置一定是错误的因为我无法加载 .scss 文件。如何调整配置以在弹出的 create-react-app 中加载 .scss 文件？

So my config must be wrong as I'm not able to load .scss files. How to adjust config to load .scss files in ejected create-react-app?

推荐答案

好，我找到了解决方案-与此不同：

OK, I found the solution - changed from this:

{
    test: /\.scss$/,
    include: paths.appSrc,
    loaders: ["style", "css", "scss"]
},

为此：

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

现在我的 .scss 文件正在加载！ ！

And now my .scss files are loading!!

这篇关于将Sass（.scss）添加到弹出的create-react-app配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！