0

所以我试图使用 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"]
  }
};
4

2 回答 2

1

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

"webpack": "^4.41.5"

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

于 2021-01-10T20:57:05.807 回答
0

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

而不是加载器，它是需要使用的“使用”，例如：

{ 
   test: /\.s(a|c)ss$/,
   use: ['style-loader','css-loader', 'sass-loader'
},
于 2021-07-10T21:28:46.573 回答