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

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

在 config/webpack.config.dev.js 内部，我向加载器添加了以下代码段:

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

所以加载器数组的开头现在看起来像这样:

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

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

import './assets/app.scss'; 

我收到错误:

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

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

请您参考如下方法:

检查第一个加载器，首先它获取所有文件，并排除其他加载器文件

loaders: [ 
        { 
            exclude: [ 
                /\.html$/, 
                /\.(js|jsx)$/, 
                /\.css$/, 
                /\.json$/, 
                /\.svg$/ 
            ], 
            loader: 'url', 
            query: { 
                limit: 10000, 
                name: 'static/media/[name].[hash:8].[ext]' 
            } 
        }, 

所以添加

/\.sass$/, 
/\.scss$/, 

排除，似乎解决了我遇到的同样问题:D