覆盖特定文件的 angular 个加载程序

Question

我们有一个使用 angular 创建的代码库，它使用 angular cli 和默认的 webpack 配置。然而，我们开始从 angular 转向 webcomponents。为了在我们的 webcomponent ts 文件中使用 scss，我们创建了一个新的 webpack 加载器，我们在其中添加了正确的 scss 文件作为依赖项，等待编译好的 css 来自 sass-loader 并使用字符串替换将其插入到我们的 ts 文件中。

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

结尾的文件则不需要。

我如何告诉 angular 停止为我的 *.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:

覆盖默认加载程序

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 仍然有问题，但这是另一个问题，我将 post 提出一个新问题。

覆盖特定文件的 angular 个加载程序

Override angular loaders for specific files

sass

typescript

webpack

angular

webpack-loader