动态改变 SCSS 导入的 Webpack 钩子

Posted 2023-02-22

【中文标题】动态改变 SCSS 导入的 Webpack 钩子

【英文标题】：Webpack hooks to dynamically alter SCSS imports

【发布时间】：2020-02-18 04:44:57

【问题描述】：

问题

编辑：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";

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

【参考方案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;
            ,
        ,
    ,
,