3

目前正在为 4 个相同站点优化共享 webpack 构建，其中样式仅因 SASS 中特定于站点的变量覆盖而有所不同，并且正在寻找一种在运行或运行和 SASS 编译器运行@import之前动态替换 SASS 文件顶部的引用的方法。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 {
    ...
}

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

是否有可以从 webpack 中解决此问题的插件或加载器？

谢谢

4

1 回答 1

2

我最终想出了处理这个问题的“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.scss目录中ROOT_DIR/path/to/site1/scss/component。

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

于 2019-11-14T14:25:52.970 回答