小编典典

将Sass(.scss)添加到弹出的create-react-app配置中

reactjs

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

我确实弹出npm run eject并安装了必要的依赖项: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';

我收到一个错误:

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

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


阅读 307

收藏
2020-07-22

共1个答案

小编典典

好的,我找到了解决方案-与此不同:

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

对此:

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

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

2020-07-22