如何实现 SASS 以与原始 webpack 做出反应？答案

【问题标题】：How to implement SASS into react with raw webpack?如何实现 SASS 以与原始 webpack 做出反应？
【发布时间】：2021-04-15 20:23:44
【问题描述】：

所以我尝试使用 Bulma 并得到一个无法导入的 _varibales.sass，我在我的 src 文件夹中。所以我以为是因为我没有配置 webpack 来支持 Sass。

所以我按照this tutorial 的配置说明进行操作，但随后出现加载程序错误。这是我第一次使用原始 webpack 而不是 CRA。我这样做是因为我想更多地了解 Webpack 和 Babel。

我尝试过的另一件事是在 dart-sass 配置中找到的 Webpack 配置。

我现在的错误是：

[webpack-cli] 无效的配置对象。 Webpack 已使用与 API 架构不匹配的配置对象进行初始化。

configuration.module.rules[2] 应该是以下之一： [“...” |对象{编译器？，依赖？，descriptionData？，强制？，排除？，生成器？，包括？，发行者？，发行者层？，层？，加载器？，mimetype？，oneOf？，选项？，解析器？，realResource？，解析？，资源？，resourceFragment？，resourceQuery？，规则？，sideEffects？，测试？，类型？，使用？ }, ...]

-> 一条规则。细节： * configuration.module.rules[2].loader 应该是一个非空字符串。

而我的webpack.config.js 看起来像这样：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const isDevelopment = process.env.NODE_ENV === 'development'

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"]
        }
      },
      {
        test: /\.module\.s(a|c)ss$/,
        loader: [
          isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: true,
              sourceMap: isDevelopment
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: isDevelopment
            }
          }
        ]
      },
      {
        test: /\.s(a|c)ss$/,
        exclude: /\.module.(s(a|c)ss)$/,
        loader: [
          isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sourceMap: isDevelopment
            }
          }
        ]
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src', 'index.html') }),
    new Dotenv(),
    new MiniCssExtractPlugin({
      filename: isDevelopment ? '[name.css]' : '[name].[hash].css',
      chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
    })
  ],
  resolve: {
    extensions: [".js", ".jsx", ".sass", ".scss"]
  }
};

【问题讨论】：

你的 WebPack 版本是多少？
根据我的package.json，5.12.2
我猜它会是 5 或更高版本。尝试降级到较低版本，例如"webpack": "^4.41.5"。这些教程很可能是在早期版本的 WebPack 之上编写的，我怀疑是否会发布这种兼容性。我努力使用版本 5 或更高版本，所以我最终放弃并使用了已经提到的版本。
好的，谢谢。看来这就是问题所在。

标签： reactjs webpack sass webpack-5 webpack-loader

【解决方案1】：

您使用 WebPack 版本 5+。降级到较低版本的 WebPack 以确保兼容性。

"webpack": "^4.41.5"

如果您需要坚持使用 5+ 版本或了解更多关于webpack.config.json 配置文件中的错误，请参阅Webpack v4 to v5 migration。

【讨论】：

【解决方案2】：

实际上，我遇到了同样的问题，这让我回到了这个问题，我在这里找到了答案（降级并没有因为依赖太多......）：https://webpack.js.org/loaders/sass-loader/

需要使用的是'use'而不是loader，例如：

{ 
   test: /\.s(a|c)ss$/,
   use: ['style-loader','css-loader', 'sass-loader'
},

【讨论】：