[英]symfony / webpack-encore: How can I make colors in .scss to come from an ENV var? What caches have to be rebuilt?
I have a project based on on symfony 5 and webpack-encore.我有一个基于 symfony 5 和 webpack-encore 的项目。
I run multiple instances of the project in production, with different contents.我在生产中运行该项目的多个实例,具有不同的内容。 I create a docker image and run many containers off the same image, setting the content via ENV variables that typically configure the database name.
我创建了一个 docker 映像并在同一个映像上运行许多容器,通过通常配置数据库名称的 ENV 变量设置内容。 No
.env.*
files involved, just RAM-based ENV vars.不涉及
.env.*
文件,仅涉及基于 RAM 的 ENV 变量。
The stylesheet is identical for all the clones.所有克隆的样式表都是相同的。 But now I would like to "tune" the base colors of the SASS from which all the color palette is derived from an ENV var.
但是现在我想“调整” SASS 的基础 colors,所有调色板都来自 ENV var。
In my styles/app.scss
I do now have this line:在我的
styles/app.scss
,我现在有这一行:
$primary: darken(#428bca, 20%);
#428bca
to depend on the runtime docker environment variable that I set when running the container?#428bca
依赖于运行容器时设置的运行时 docker 环境变量?yarn encore production
again?yarn encore production
就够了吗? Or do I have to run the php bin/console cache:clear
before running the yarn encore
?yarn encore
之前运行php bin/console cache:clear
吗? You may be able to do it by using the sass-loader's additionalData
option.您可以通过使用 sass-loader 的
additionalData
数据选项来做到这一点。 See https://www.npmjs.com/package/sass-loader#additionaldata见https://www.npmjs.com/package/sass-loader#additionaldata
You can pass the sass-loader options to Encore.enableSassLoader()
, so I guess something like the following in webpack.config.js should create a $main-color
SASS variable dynamically from your environment variable.您可以将 sass-loader 选项传递给
Encore.enableSassLoader()
,所以我猜想 webpack.config.js 中的以下内容应该从您的环境变量动态创建一个$main-color
SASS 变量。
Encore.enableSassLoader({
additionalData: "$main-color: " + process.env.MAIN_COLOR + ";",
})
Then in your SASS code, you should be able to do $primary: darken($main-color, 20%);
然后在您的 SASS 代码中,您应该可以执行
$primary: darken($main-color, 20%);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.