symfony/webpack encore:如何在.scs中制作来自ENV var的颜色?必须重建哪些缓存

Question

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

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

所有克隆的样式表都是相同的。但现在我想"；调谐"；SASS的基本颜色，所有调色板都来自ENV var.

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

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

1. 如何使#428bca依赖于运行容器时设置的运行时docker环境变量
2. 如何从.scs调用env-var值
3. 更改后，再次只运行yarn encore production是否足够？还是在运行yarn encore之前必须先运行php bin/console cache:clear

Answer 1

您可以使用sass加载程序的additionalData选项来执行此操作。看见https://www.npmjs.com/package/sass-loader#additionaldata

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

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

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