Angular CLI 6自定义Webpack SCSS加载器

问题描述

我正在尝试编写一个自定义Webpack模块，以用cli 6覆盖或扩展角度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世界风格

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"]
                }
            }]
        }]
    }
};

但是以此运行我的构建

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-1oc4 https://medium.com/a-beginners-guide-for-webpack-2/webpack-loaders-css-and-sass-2cc0079b5b3a https://www.npmjs.com/包/@ 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

Solutions and guides i have been mainly focused onhttps://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/package/@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

推荐答案

我遇到了同样的问题，我尝试了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加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！