Foundation 6将scss文件应用于各个页面

Question

我是基础6的新手，我使用foundation-cli跟踪ZURB模板。

我看到一个名为app.scss的scss文件被用作根文件，它被编译为css，然后应用于src / pages中的每个html文档。

我希望能够为我网站上的每个页面创建一个单独的scss文件，该文件只会应用到我的页面。

我该怎么做才能调用基础监视只将scss文件应用于一个特定的html文档？

Answer 1

我建议为每个页面创建不同的.scss个文件。

例如，如果您有3个不同的页面：

• Home.html中
• Page1.html
• Page2.html

创建3个gulpfile.babel.js个文件：

• home.scss
• page1.scss
• page2.scss

这些文件中的每一个都将导入所需的Foundation模块，并包含相应页面的样式。它们之间可能存在一些重叠，这没关系。

默认的基础构建脚本app.scss需要稍加修改。它只能编译.scss。这将需要更改以编译/src/assets/scss/目录中的所有.css文件。

这是simple one-line change。

修改gulpfile后，它将创建3个单独的home.html文件：

• home.css
• page1.css
• page2.css

接下来，您需要将每个页面链接到相应的CSS文件。如果您使用的是静态文件，则只需链接到相应的CSS文件即可。例如：home.css会使用<link rel="stylesheet" type="text/css" href="home.css"> ：

default.html

如果您使用的是使用Panini编译页面的Zurb模板，则需要更改ifpage布局。这可以使用Panini的{{#ifpage 'index'}} <link rel="stylesheet" href="{{root}}assets/css/app.css"> {{/ifpage}} {{#ifpage 'page1'}} <link rel="stylesheet" href="{{root}}assets/css/page1.css"> {{/ifpage}} 来设置条件CSS文件。

{{1}}