sass - 使用 Encore 将变量传递给 SASS

Question

我正在开发 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 使用各种混合来覆盖 Bootstrap 中的原色，但我想知道是否可以将变量传递到 main.scss。

Answer 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')

你就完成了。

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

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

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