(https://i.stack.imgur.com/IEmJ3.png)这里是它的文本
ERROR in ./src/components/App.scss
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader
当我完成npm run build时,我得到了这个错误消息。
下面我已经粘贴了我的Webpack配置,这里testLoader是自定义加载器错误不是因为testLoader,而是因为我已经导入了一个css文件到我的App.js的React(它基本上是给错误时,我有一个css文件导入)
(https://i.stack.imgur.com/wWDtV.png)。如果有人知道如何解决,请告诉我。
这里是代码,如果图像有麻烦,在看到图像。
const merge = require("webpack-merge");
const common = require("./webpack.common.js");
const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ManifestPlugin = require("webpack-manifest-plugin");
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const webpack = require("webpack");
const enableBundleAnalyzer = process.env.ENABLE_ANALYZER === "true";
const loadersPath = path.resolve(__dirname, "../loaders");
module.exports = merge(common, {
mode: "production",
devtool: "source-map",
module: {
rules: [
{
test: /\.(js)$/,
use: { loader: path.resolve(loadersPath, "testLoader.js") },
},
{
test: /\.s?(a|c)ss$/,
use: [{ loader: "css-loader" }, { loader: "sass-loader" }],
},
],
},
optimization: {
splitChunks: {
chunks: "all",
},
runtimeChunk: false,
},
plugins: [
new CleanWebpackPlugin([path.resolve(__dirname, "../dist")], {
root: process.cwd(),
verbose: true,
dry: false,
}),
new OptimizeCssAssetsPlugin(),
new MiniCssExtractPlugin({
filename: "[name].[hash:8].css",
chunkFilename: "[id].[hash:8].css",
}),
new ManifestPlugin(),
new BundleAnalyzerPlugin({
analyzerMode: enableBundleAnalyzer === true ? "static" : "disabled",
openAnalyzer: true,
}),
],
});
我看过一些帖子,他们说这是因为同一个加载器执行了两次,但这不是我的情况。
1条答案
按热度按时间j8ag8udp1#
从屏幕截图来看,我假设您使用的是Webpack v4
要使用最新版本的
css-loader
,需要webpack@5