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

Posted 2023-02-19

【中文标题】如何实现 SASS 以与原始 webpack 做出反应？

【英文标题】：How to implement SASS into react with raw 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 或更高版本，所以我最终放弃并使用了已经提到的版本。

好的，谢谢。看来这就是问题所在。

【参考方案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'
,