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

问题描述

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

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

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

我现在的错误是：

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

configuration.module.rules[2] 应该是以下之一： ["..." |对象{编译器？，依赖？，描述数据？，强制？，排除？，生成器？，包括？，发行者？，发行者层？，层？，加载器？，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)$/,'css-loader',options: {
              sourceMap: isDevelopment
            }
          }
        ]
      }
    ]
  },devServer: {
    historyApiFallback: true,},plugins: [
    new HtmlWebpackPlugin({ template: path.resolve(__dirname,'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 版本 5+。降级到较低版本的 WebPack 以确保兼容性。

"webpack": "^4.41.5"

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

,

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

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

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