要解决“Angular 9与Tailwind CSS、PostCSS、SCSS和MiniCssExtractPlugin无法编译”的问题,您可以尝试以下步骤:
确保您已正确安装并配置了Angular CLI和Angular项目。
确保您已正确安装了Tailwind CSS、PostCSS和SCSS。您可以使用以下命令进行安装:
npm install tailwindcss postcss sass --save-dev
确保您已正确配置了PostCSS。在项目根目录下创建一个名为postcss.config.js
的文件,并添加以下内容:
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
在项目的angular.json
文件中,将styles
数组中的CSS文件更改为SCSS文件。例如:
"styles": [
"src/styles.scss"
]
在项目的根目录下创建一个名为tailwind.scss
的文件,并添加以下内容:
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
在项目的styles.scss
文件中,导入tailwind.scss
文件。例如:
@import 'tailwind';
在项目的根目录下创建一个名为webpack.config.js
的文件,并添加以下内容:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader',
]
}
]
}
};
在项目的根目录下运行以下命令安装mini-css-extract-plugin
:
npm install mini-css-extract-plugin --save-dev
在项目的angular.json
文件中,将build
配置中的builder
更改为@angular-builders/custom-webpack:browser
。例如:
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
// ...
}
}
}
在项目的angular.json
文件中,将build
配置中的customWebpackConfig
更改为webpack.config.js
的路径。例如:
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js"
},
// ...
}
}
}
最后,重新启动您的Angular项目并尝试编译。
这些步骤应该帮助您解决“Angular 9与Tailwind CSS、PostCSS、SCSS和MiniCssExtractPlugin无法编译”的问题。确保您按照上述步骤正确安装和配置所需的工具和插件,并正确修改配置文件。