javascript - Webpack Hook 可动态更改 SCSS 导入

Question

问题

编辑:sass-loader 的自定义导入器似乎最有可能？

是否有一个我可以连接的 webpack 管道，它允许我以编程方式更新来自以下位置的 scss 导入:

@import 'bootstrap/scss/function';

至

@import '~bootstrap/scss/function';

我一直在尝试使用解析管道但无济于事:

plugins: [
    {
        apply: resolver => {
            resolver.hooks.parsedResolve.tap('resolve', (request, resolveContext, callback) => {
                webpackUtils.handleLegacyImports(request, resolveContext, resolver, callback);
            });
        },
    },
],

但我也想知道我是否也可以连接到 sass-loader，文档很少。

上下文

所以这是一个不幸的工作场景，它让我从 git 子模块导入 SCSS 文件，以便我可以进行覆盖，它的结构如下:

-Project
--MyApp
---scss
----global.scss
--SubmoduleApp
---scss
----global.scss

问题是子模块设计得很差，并且在任何导入上都没有使用波浪线，而是有一个自定义构建脚本来确定导入。正如预期的那样，当 webpack 到达他们时，它会崩溃

ERROR in ./MyApp/scss/global.scss
Module build failed ...
SassError: File to import not found or unreadable: bootstrap/scss/functions.
        on line 1 of ...
>> @import "bootstrap/scss/functions";

在子模块中添加波形符可以解决问题，但这并不是解决方案，因为子模块是第三方的并且无法更新。这就是为什么我需要在尝试导入之前添加波浪号或其他东西来使这项工作起作用......任何想法将不胜感激!

Answer 1

Sass-Loader 上的自定义导入器毕竟是答案!

这是处理边缘情况的快速示例:

{
    loader: 'sass-loader',
    options: {
        sourceMap: process.env.NODE_ENV !== 'production',
        sassOptions: {
            importer: url => {
                if (url.startsWith('bootstrap/')) {
                    return {
                        file: path.resolve(`./node_modules/${url}`),
                    };
                }
                return null;
            },
        },
    },
},