如何解决symfony / webpack-encore:如何使 .scss 中的颜色来自 ENV 变量?必须重建哪些缓存?
我有一个基于 symfony 5 和 webpack-encore 的项目。
我在生产中运行了项目的多个实例,具有不同的内容。我创建了一个 docker 镜像并在同一个镜像上运行多个容器,通过通常配置数据库名称的 ENV 变量设置内容。不涉及 .env.*
文件,仅涉及基于 RAM 的 ENV 变量。
所有克隆的样式表都是相同的。但现在我想“调整”SASS 的基色,所有调色板都来自于它的 ENV 变量。
在我的 styles/app.scss
中,我现在有这一行:
$primary: darken(#428bca,20%);
- 如何让
#428bca
依赖于我在运行容器时设置的运行时 docker 环境变量? - 如何从 .scss 调用 env-var 值?
- 更改后,再次运行仅
yarn encore production
就足够了吗?还是我必须在运行php bin/console cache:clear
之前运行yarn encore
?
解决方法
您可以使用 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%);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。