1

我们有一个使用 angular 创建的代码库，它使用 angular cli 和它的默认 webpack 配置。然而，我们开始从 Angular 转向 webcomponents。为了在我们的 webcomponent ts 文件中使用 scss，我们创建了一个新的 webpack 加载器，我们在其中添加了正确的 scss 文件作为依赖项，等待从 sass-loader 编译的 css 并使用字符串替换将其插入到我们的 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 代码。任何帮助是极大的赞赏。

4

1 回答 1

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

基本上，我采用旧配置并编辑测试正则表达式以使用否定的lookbehind 排除我的文件。然后我将自己的加载器添加到配置规则中。我仍然无法获得我的 css，但这是另一个问题，我将为此发布一个新问题。

于 2019-06-03T11:17:41.437 回答