如何实现 SASS 与原始 webpack 反应？

Question

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

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

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

我现在的错误是：

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

configuration.module.rules[2] should be one of these: ["..." | object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }, ...]

-> A rule. Details: * configuration.module.rules[2].loader should be a non-empty string.

我的 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"]
  }
};

Answer 1

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

"webpack": "^4.41.5"

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

Answer 2

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

需要用到的不是loader，而是'use'，比如：

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

如何实现 SASS 与原始 webpack 反应？

How to implement SASS into react with raw webpack?

sass

reactjs

webpack

webpack-loader

webpack-5