[英]Angular Project fails compilation with @angular-builders/custom-webpack on scss files
I am using @angular-builders/custom-webpack to extend the compilation of the scss
files in order to use postcss and the plugin postcss-modules我正在使用@angular-builders/custom-webpack来扩展
scss
文件的编译,以便使用postcss和插件postcss-modules
Currently, when I try to serve the project these errors are displayed in the terminal:目前,当我尝试为项目提供服务时,这些错误会显示在终端中:
I think the issue is the component.scss
files are being compiled twice, one for the default compiler and the other one by my custom webpack config:我认为问题是
component.scss
文件被编译了两次,一个用于默认编译器,另一个用于我的自定义 webpack 配置:
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.component\.(css|sass|scss)$/,
exclude: [path.resolve('node_modules'), path.resolve('src/styles.scss')],
include: [path.resolve('src/app')],
use: [
'raw-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
require('postcss-modules')({
generateScopedName: "[hash:base64:5]"
}),
require('postcss-import')
]
}
},
'sass-loader'
]
}
]
}
};
Here is the repo of my project:这是我的项目的回购:
https://github.com/gquinteros93/angular-css-modules https://github.com/gquinteros93/angular-css-modules
Thanks in advance.提前致谢。
I found the solution.我找到了解决方案。
My issue was how I was extending the postcss-loader
, thanks to just-jeb explanation and this example: https://github.com/angular/angular-cli/issues/8427#issuecomment-576263052我的问题是我如何扩展
postcss-loader
,这要归功于just-jeb 的解释和这个例子: https://github.com/angular/angular-cli/issues/8427#issuecomment-576263052
I was able to extend the postcss-loader.我能够扩展 postcss-loader。
Instead of doing:而不是这样做:
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.component\.(css|sass|scss)$/,
exclude: [path.resolve('node_modules'), path.resolve('src/styles.scss')],
include: [path.resolve('src/app')],
use: [
'raw-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
require('postcss-modules')({
generateScopedName: "[hash:base64:5]"
}),
require('postcss-import')
]
}
},
'sass-loader'
]
}
]
}
};
I had to do:我必须做:
const postcssModules = require('postcss-modules');
module.exports = (config, options) => {
const scssRule = config.module.rules.find(x => x.test.toString().includes('scss'));
const postcssLoader = scssRule.use.find(x => x.loader === 'postcss-loader');
const pluginFunc = postcssLoader.options.plugins;
const newPluginFunc = function () {
var plugs = pluginFunc.apply(this, arguments);
plugs.splice(plugs.length - 1, 0, postcssModules({ generateScopedName: "[hash:base64:5]" }));
return plugs;
}
postcssLoader.options.plugins = newPluginFunc;
return config;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.