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

时间:2019-04-19 00:18:56

标签: webpack sass

当前正在为4个相同的站点优化共享Webpack构建,这些站点的样式仅因SASS中特定于站点的变量覆盖而有所不同,并且正在寻找一种方法来动态替换SASS文件顶部的@import引用, sass-loadercss-loader正在运行,SASS编译器正在运行。

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

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

.some-class {
    ...
}

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

示例:

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中解决此问题?

谢谢

1 个答案:

答案 0 :(得分:0)

我最终想出了解决此问题的“网络打包方式”-创建别名

使用上面命令上方的示例:

./Cash.cpp: In function 'const Money::Cash Money::operator+(const Money::Cash&, const Money::Cash&)':
./Cash.cpp:28:39: error: no match for 'operator=' (operand types are 'Money::Cash' and 'int')
         cents() = a.cents() + b.cents();
                                       ^
In file included from ./Cash.cpp:1:
./Cash.h:7:11: note: candidate: 'Money::Cash& Money::Cash::operator=(const Money::Cash&)' <deleted>
     class Cash {
           ^~~~
./Cash.h:7:11: note:   no known conversion for argument 1 from 'int' to 'const Money::Cash&'

我在Webpack配置中创建了一个名为webpack env.sitename=site1 --progress --config ./wp.config.js 的别名:

siteStyles

*注意:{ ... resolve: { alias: { ... siteStyles: path.join(ROOT_DIR, `path/to/${env.sitename}/scss`) } } ... } 是代表项目根目录的变量

有了别名,我们现在可以使用SCSS / SASS文件中的波浪号(ROOT_DIR)利用SCSS / SASS的路径解析功能,如下所示:

~

,导入将解析为@import ~siteStyles/component/foo;目录中的foo.scss

结合webpack别名,SASS / SCSS的ROOT_DIR/path/to/site1/scss/component功能和绝对文件系统路径,我能够在构建过程中解析适当的特定于站点的样式。