使用 Encore 将变量传递给 SASS

【问题标题】：Passing Variable into SASS using Encore使用 Encore 将变量传递给 SASS
【发布时间】：2018-08-16 13:21:29
【问题描述】：

我正在开发一个 Symfony 4 应用程序并使用 Symfony 的 Webpack 包装器 Encore。

该应用程序将用于在一个数据库上运行多个站点，每个站点都有不同的主题。主题将是 bootstrap 4 的版本，它们的主要变量设置为某种颜色。即主题1红色，主题2蓝色。

实现这一目标的最佳方法是什么？

我有多个 CSS 输出文件，即 theme1.css、theme2.css 并从 HTML 动态引用这些文件。

我还想知道 Encore/Webpack 是否可以选择将变量传递给 SCSS 文件，即：

.addStyleEntry('theme1', './scss/main.scss, red) // THIS WOULD OUTPUT theme1.css (RED) 
.addStyleEntry('theme2', './scss/main.scss, blue) // THIS WOULD OUTPUT theme1.css (BLUE)

main.scss 使用各种 mixin 来覆盖 Bootstrap 中的原色，但我想知道是否可以将变量传递到 main.scss。

【问题讨论】：

标签： sass symfony4 webpack-encore

【解决方案1】：

为每个主题创建一个 SCSS。这样可以轻松添加和维护更多更改。

// scss/theme1.scss
$primary-color: red;
@import 'main';

和

// scss/theme2.scss
$primary-color: blue;
@import 'main';

打包

.addStyleEntry(theme1, './scss/theme1.scss')
.addStyleEntry(theme2, './scss/theme2.scss')

你就完成了。

虽然有一种方法可以使用 Webpack/Encore 设置 SCSS 变量，方法是在所有 sass-entries 前面加上一个字符串，但我不推荐这种方法：

 .enableSassLoader((config) => { config.data = '$primary-color: green;' })

所有条目都将具有相同的前缀 $primary-color: green;，并且您正在污染应该尽可能放在样式表中的样式信息。

【讨论】：