Question

我正在使用Symfony 4应用程序，并使用Symfony的Webpack包装器Encore。

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

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

尽管我有大约多个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。这样，可以轻松添加和维护更多更改。

"C:\Program Files (x86)\IIS\Microsoft Web Deploy V3\msdeploy.exe" -verb:sync -source:package="TestJenkins\obj\Release\Package\TestJenkins.zip" -dest:auto,computerName=my computer name -allowUntrusted=true

和

Info: Adding sitemanifest (sitemanifest).
Info: Creating application (http://my local address) Info: Adding virtual 
path (http://my local address) Error Code: ERROR_SITE_DOES_NOT_EXIST More 
Information: Site 'http:' does not exist

打包

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

您完成了。

尽管有一种方法可以通过用字符串为所有sass条目添加前缀来用Webpack / Encore设置SCSS变量，但我不推荐这种方法：

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

所有条目都具有相同的前缀.addStyleEntry(theme1, './scss/theme1.scss') .addStyleEntry(theme2, './scss/theme2.scss')，并且您正在污染应尽可能放置在样式表中的样式信息。

使用Encore将变量传递到SASS中

1 个答案: