gpt4 book ai didi

Webpack - SASS/SCSS '@import' 语句中的字符串替换

转载 作者:行者123 更新时间:2023-12-04 15:46:00 24 4
gpt4 key购买 nike

目前正在为 4 个相同站点改进共享 webpack 构建,其中样式仅因 SASS 中站点特定的变量覆盖而不同,我正在寻找一种方法来动态替换 @import sass-loader 之前的 SASS 文件顶部的引用或 css-loader运行和 SASS 编译器运行。

例如,像 text-input.scss 这样的组件可能具有以下结构:

@import '../../styles/global/_variables.scss';
@import '../../styles/<<<SITENAME>>>/_variables.scss';

.some-class {
...
}

我想要一种方法来替换字符串 <<<SITENAME>>>env.sitename在构建时传入的变量,在 SASS/SCSS 编译器启动之前。

例子:
webpack env.sitename=site1 --progress --config ./wp.config.js

结果是到了 sass-loader运行时,字符串替换的文件在 SASS 编译器中看起来像:
@import '../../styles/global/_variables.scss';
@import '../../styles/site1/_variables.scss';

.some-class {
...
}

我试过 string-replace-loader但是在 SASS 编译器尝试解析所有文件名之前无法让它运行并执行替换,考虑到 webpack 的模块解析是如何工作的,这是有道理的。

是否有插件或加载程序可以从 webpack 中解决这个问题?

谢谢

最佳答案

我最终想出了处理这个问题的“webpack 方式” - 创建别名 .

使用上面命令的示例:

webpack env.sitename=site1 --progress --config ./wp.config.js

我创建了一个别名 siteStyles在我的 webpack 配置中:
{
...
resolve: {
alias: {
...
siteStyles: path.join(ROOT_DIR, `path/to/${env.sitename}/scss`)
}
}
...
}

* 注: ROOT_DIR是代表项目根的变量

有了别名,我们现在可以利用 SCSS/SASS 的路径解析功能,在我们的 SCSS/SASS 文件中使用波浪号( ~ ),如下所示:
@import ~siteStyles/component/foo;
并且导入将解析为 foo.scssROOT_DIR/path/to/site1/scss/component目录。

结合 webpack 别名, ~ SASS/SCSS 的特性和绝对文件系统路径我能够在构建过程中解析正确的站点特定样式。

关于Webpack - SASS/SCSS '@import' 语句中的字符串替换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55755143/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com