小编min*_*vot的帖子

目前正在完善 4 个相同站点的共享 webpack 构建，其中样式仅因 SASS 中特定于站点的变量覆盖而有所不同，并且正在寻找一种方法来在运行或运行 SASS 编译器之前动态替换SASS文件@import顶部的引用。sass-loadercss-loader

例如，类似的组件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 中解决这个问题？

谢谢