使用Encore将变量传递到SASS

我正在开发Symfony 4应用程序，并使用Symfony的网页包装器Encore

该应用程序将用于在一个数据库上运行多个站点，每个站点具有不同的主题。主题将是bootstrap 4的版本，其主要变量设置为特定颜色。i、 e是红色的，e是蓝色的

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

我想到了多个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使用各种混音来覆盖引导中的原色，但我想知道是否可以将一个变量传递到main.scss。

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

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

及

装上

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

你就完了

虽然有一种方法可以通过在所有sass条目前加上字符串来设置带有Webpack/Encore的SCSS变量，但我不推荐这种方法：

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

所有条目将具有相同的前缀

$primary color:green和样式设置信息都应该放在样式表中

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