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

IT技术 reactjs sass webpack create-react-app
2021-05-19 09:53:50

我想.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';

我收到一个错误：

未捕获的错误：找不到module“./assets/app.scss”

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

4个回答

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

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

所以添加

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

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

当我尝试将 sass 集成到空的 react 项目中时，我使用了这篇文章。那里提出的解决方案不起作用并收到与主题类似的错误。在我的情况下更换style-loader有require.resolve('style-loader')帮助：

 {
        test: /\.scss$/,
        include: paths.appSrc,
        loaders: [require.resolve('style-loader'), require.resolve('css-loader'), require.resolve('sass-loader')]
  },

好的，我找到了解决方案 - 从此改变：

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

对此：

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

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

你可能必须使用

include: paths.appSrc,

启用 webpack 热重载的选项。所以你的配置片段可能看起来像

{
    test: /\.scss$/,
    include: paths.appSrc,
    loaders: ['style', 'css', 'sass']
},
其它你可能感兴趣的问题
上一篇Reprap Ormerod 2 Duet Web 控件未自动启动，我该如何解决？ 下一篇从拉取的 github 项目启动 React App