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

问题描述

所以我试图使用 Bulma 并得到一个 can't import _varibales.sass，我在我的 src 文件夹中。所以我以为是因为我没有配置 webpack 来支持 Sass。

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

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

我现在的错误是：

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

标签： reactjswebpacksasswebpack-5webpack-loader

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

问题描述

解决方案

推荐阅读