symfony / webpack-encore：如何使 colors in.scss 来自 ENV var？ 哪些缓存需要重建？

Question

我有一个基于 symfony 5 和 webpack-encore 的项目。

我在生产中运行该项目的多个实例，具有不同的内容。 我创建了一个 docker 映像并在同一个映像上运行许多容器，通过通常配置数据库名称的 ENV 变量设置内容。 不涉及.env.*文件，仅涉及基于 RAM 的 ENV 变量。

所有克隆的样式表都是相同的。 但是现在我想“调整” SASS 的基础 colors，所有调色板都来自 ENV var。

在我的styles/app.scss ，我现在有这一行：

$primary: darken(#428bca, 20%);

1. 如何使#428bca依赖于运行容器时设置的运行时 docker 环境变量？
2. 如何从 .scss 调用 env-var 值？
3. 改了之后，再只运行yarn encore production就够了吗？ 或者我必须在运行yarn encore之前运行php bin/console cache:clear吗？

Answer 1

您可以通过使用 sass-loader 的additionalData数据选项来做到这一点。 见https://www.npmjs.com/package/sass-loader#additionaldata

您可以将 sass-loader 选项传递给Encore.enableSassLoader() ，所以我猜想 webpack.config.js 中的以下内容应该从您的环境变量动态创建一个$main-color SASS 变量。

Encore.enableSassLoader({
  additionalData: "$main-color: " + process.env.MAIN_COLOR + ";",
})

然后在您的 SASS 代码中，您应该可以执行$primary: darken($main-color, 20%);