带有postcss的mini-css-extract插件抛出this.getOptions不是一个函数
我正在尝试为我的个人项目设置一个顺风 css。这是一个反应 SSR 应用程序。我在 webpack 配置下的 postcss 设置有问题。它会在每个 *.css 文件(甚至是空文件)上抛出相同的错误。
好像无法解析配置文件或默认选项?尝试了不同的配置,但没有效果。最初,我认为这可能与我的 css 文件有关,但是如果我删除 postcss 插件,它们都有效并且可以编译
网络包配置
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const paths = require('./paths');
module.exports = {
entry: {
index: path.resolve(paths.projectSrc, 'index.js'),
},
resolve: {
alias: {
'@src': paths.projectSrc,
},
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true },
},
],
exclude: /node_modules/,
},
{
exclude: /node_modules/,
test: /.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: path.resolve(__dirname, './client-build/css/'),
},
},
{
loader: 'css-loader',
options: { importLoaders: 1 },
},
{
loader: 'postcss-loader',
options: {
postcssOptions: {
config: path.resolve(__dirname, 'postcss.config.js'),
},
},
},
],
},
{
test: /.(woff2?|ttf|otf|eot|png|jpg|svg|gif)$/,
exclude: /node_modules/,
loader: 'file-loader',
options: {
name: './assets/[name].[ext]',
},
},
],
},
plugins: [
new ESLintPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(paths.public, 'index.html'),
filename: 'index.html',
}),
new MiniCssExtractPlugin({
filename: '[name].bundle.css',
chunkFilename: '[id].css',
}),
new CopyWebpackPlugin({
patterns: [{ from: path.resolve(paths.public, 'assets'), to: 'assets' }],
}),
],
devtool: 'inline-source-map',
};
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
控制台输出
回答
这是由v5.0.0中的一个重大更改引起的,postcss-loader其中对版本4的支持webpack已被删除。
自述文件指出:
变更日志
此项目的所有显着更改都将记录在此文件中。有关提交指南,请参阅标准版本。
5.0.0 (2021-02-02)
? 重大变化
- 最低支持
webpack版本是5
如何修复
您需要降级postcss-loader到v4.2。
Angular 项目的旁注
如果这对其他读者有所帮助:您可能不仅仅在 React 项目中看到这一点。我在将 Angular 8 项目升级到 Angular 11 后发现了这个问题。
虽然我对 React 项目无能为力,但无论如何,这个 Angular 提示也可能有用。如果您在 Angular 项目中,并且已经尝试通过升级到v5 of来解决此问题webpack,然后在使用v4 of 的库时遇到依赖问题webpack- 您将需要执行以下步骤。
- 如上所述降级
postcss-loader到v4.2。 - 删除
webpackV5的package.json。 - 删除
package.lock.json。 - 删除
node_modules目录。 - 运行
npm install。 - 运行
ng serve或ng build。 - 告诉老板你修好了。
在此之后,你应该很好地使用 tailwindcss 和 Angular。
THE END
二维码