Question

我们有一个使用angular创建的代码库，它使用angular cli和默认的webpack配置。但是，我们开始从有角度的转向Web组件。为了在我们的webcomponent ts文件中使用scss，我们创建了一个新的webpack loader，在其中我们添加了正确的scss文件作为依赖项，等待sass-loader中已编译的CSS并使用字符串替换将其插入到我们的ts文件中。

这在正常的webpack环境中可以正常工作。但是，Angular还通过使用一些不同的加载器来处理scss文件。因此，scss文件不再包含实际的scss，而是包含javascript。我们的其他scss文件仍然需要此文件，但以.webcomponent.scss结尾的文件则不需要。

我如何告诉Angle停止为我的* .webcomponent.scss文件使用默认加载程序？

我的extra-webpack-config.js看起来像这样：

module.exports = {
    module: {
        rules: [
            {
                test: /\.webcomponent\.ts$/,
                use: [
                    {
                        loader: './webcomponent-loader.js'
                    }
                ]
            },
            {
                test: /\.webcomponent\.scss$/,
                use: [
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    }
};

我的angular.json具有以下自定义的webpack配置：

"customWebpackConfig": {
    "path": "./extra-webpack.config.js",
    "mergeStrategies": {
        "module": "prepend",
        "loaders": "replace"
    }
}

在我使用的webcomponent-loader中

this.addDependency(this.resourcePath.replace(/.ts$/, '.scss'));

这给了我以下错误：

Invalid CSS after "module.exports": expected selector, was '= "/*Colors*/\\n/*Bl'

这告诉我angular将其转换为js代码。任何帮助将不胜感激。

Answer 1

最终，我能够使用以下extra-webpack.config.js覆盖默认加载程序：

const webpack = require('webpack');
const pkg = require('./package.json');

module.exports = (config, options) => {
    config.module.rules.forEach(rule => {
        if (rule.test.exec('.scss')) {
            rule.test = new RegExp('(?<!\.webcomponent)(' + rule.test.source + ')');
        }
    });

    config.module.rules.push({
        test: /\.webcomponent\.ts$/,
        use: [
            {
                loader: './webcomponent-loader.js'
            }
        ]
    },
    {
        test: /\.webcomponent\.scss$/,
        use: [
            {
                loader: './identity-loader.js'
            },
            {
                loader: 'sass-loader'
            }
        ]
    });

    return config;
};

基本上，我使用旧的配置并编辑测试正则表达式，以使用负向后查找来排除文件。然后，将自己的加载程序添加到配置规则中。我的CSS仍然有问题，但这是另一个问题，我将发布一个新问题。

覆盖特定文件的角度装载机

1 个答案: