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%);