Webpack Web包-在SASS/SCSS'中替换字符串@导入&x27；声明

目前正在为4个相同的站点优化一个共享网页包构建，其中样式仅因SASS中特定于站点的变量重写而不同，我正在寻找一种方法，在运行

SASS加载程序

或

css加载程序

和SASS编译器之前，动态替换SASS文件顶部的

@import

引用跑步

例如，像

text input.scss

这样的组件可能具有以下结构：

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

.some-class {
    ...
}

结果是，在运行

sass加载程序时，sass编译器会看到字符串替换文件，如下所示：

@import '../../styles/global/_variables.scss';
@import '../../styles/site1/_variables.scss';

.some-class {
    ...
}

我尝试了
string replace loader
，但在SASS编译器尝试解析所有文件名之前，无法让它运行并执行替换，考虑到webpack的模块解析工作方式，这很有意义

是否有一个插件或加载程序可以解决这个问题，从网页包

谢谢
我终于想出了处理这个问题的“webpack方法”创建一个别名

使用上面的示例，从上面执行命令：

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

我在我的网页配置中创建了一个名为
siteStyles
的别名：

{
  ...
  resolve: {
    alias: {
      ...
      siteStyles: path.join(ROOT_DIR, `path/to/${env.sitename}/scss`)
    }
  }
  ...
}

*注意：
ROOT\u DIR
是表示项目根的变量

有了别名，我们现在可以利用SCSS/SASS的路径解析功能，在我们的SCSS/SASS文件中使用波浪线（
~
），如下所示：

@import~siteStyles/component/foo

导入将解析为
根目录/path/to/site1/scss/component
目录中的
foo.scss

通过Web包别名、SASS/SCSS的
~
功能和绝对文件系统路径的组合，我能够在构建过程中解析正确的站点特定样式。
您是否设法解决了这个问题？如果是这样，你能发布你的答案吗？@vanomart刚刚发布了我的解决方案。对耽搁表示歉意
{
  ...
  resolve: {
    alias: {
      ...
      siteStyles: path.join(ROOT_DIR, `path/to/${env.sitename}/scss`)
    }
  }
  ...
}