Angular CLI 6 自定义 Webpack SCSS 加载器 [英] Angular CLI 6 Custom Webpack SCSS loader
问题描述
我正在尝试编写一个自定义 webpack 模块,以使用 cli 6 覆盖或扩展 angular 6 中的当前 SCSS 构建,目的是能够传入品牌"并将其与任何覆盖匹配,例如somemodule/'brand'/filename.override.scss"并替换父文件夹somemodule/filename.scss"中的文件,但我没有任何进展.
I am trying to write a custom webpack module to override or extend the current SCSS build in angular 6 with cli 6, with the intention of being able to pass in a 'brand' and match it to any overrides e.g "somemodule/'brand'/filename.override.scss" and replace the file in parent folder "somemodule/filename.scss" but I am making no progress.
设置:@angular/cli": "6.2.2", 与@angular-builders/custom-webpack": "^2.4.1"
Set up: @angular/cli": "6.2.2", with @angular-builders/custom-webpack": "^2.4.1"
我已经更新了我的项目构建以反映我正在使用自定义 webpack,以及覆盖/扩展的位置
I have updated my projects build to reflect that I am using custom webpack, and the location of of override/extention
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./extra-webpack.config.js"
},
我的 extra-webpack.config.js 看起来像这样,只是我在许多网站上看到的基本 hello world 样式
My extra-webpack.config.js looks like this, just a basic hello world style I have seen over many sites
module.exports = {
module:{
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["src"]
}
}]
}]
}
};
但是用这个运行我的构建
however running my build with this
ng run websitename:build
抛出这个错误
Module build failed (from ./node_modules/sass-
loader/lib/loader.js):
loader/lib/loader.js):
^
Invalid CSS after "": expected 1 selector or at-
rule, was "var content = requi"
据我所知,这可能是在尝试重新定义 scss 规则时引起的,但是我看不到要删除此规则的任何其他引用.我也尝试了一些方法来完全覆盖旧规则,但没有成功.
From my understand this can be caused when trying to redefine the scss rule, however I can not see any other references to this rule to remove. I have also attempted some methods for completely override the old rule but no luck.
我主要关注的解决方案和指南https://dev.to/meltedspark/customizing-angular-cli-6-buildan-alternative-to-ng-eject-1oc4https://medium.com/a-beginners-guide-for-webpack-2/webpack-loaders-css-and-sass-2cc0079b5b3ahttps://www.npmjs.com/包/@angular-builders/custom-webpack#custom-webpack-config-objecthttps://github.com/webpack-contrib/sass-loader/blob/master/test/bootstrapSass/webpack.config.jshttps://github.com/webpack-contrib/sass-loader/issues/536https://github.com/meltedspark/angular-builders
Solutions and guides i have been mainly focused on https://dev.to/meltedspark/customizing-angular-cli-6-buildan-alternative-to-ng-eject-1oc4 https://medium.com/a-beginners-guide-for-webpack-2/webpack-loaders-css-and-sass-2cc0079b5b3a https://www.npmjs.com/package/@angular-builders/custom-webpack#custom-webpack-config-object https://github.com/webpack-contrib/sass-loader/blob/master/test/bootstrapSass/webpack.config.js https://github.com/webpack-contrib/sass-loader/issues/536 https://github.com/meltedspark/angular-builders
推荐答案
我遇到了同样的问题,我尝试了 mergeStrategies 但没有奏效.我将我的自定义 webpack 更改为一个函数,解决了问题,我能够扩展 sass 选项.
I had the same problem, I have tried mergeStrategies but didn't work.I have changed my custom webpack into a function, that solved the issue, I was able extend sass options.
module.exports = function(config) {
const rules = config.module.rules || [];
rules.forEach(rule => {
if (String(rule.test) === String(/\.scss$|\.sass$/)) {
const loaders = rule.use;
const transformedLoaders = loaders.map(l => {
if (l.loader === 'sass-loader') {
// here you can override options or replace or add.
}
return l;
});
rule.use = transformedLoaders;
}
});
return config;
};
这篇关于Angular CLI 6 自定义 Webpack SCSS 加载器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!