Foundation 6 将 scss 文件应用于单个页面答案

【问题标题】：Foundation 6 Apply scss files to individual pagesFoundation 6 将 scss 文件应用于单个页面
【发布时间】：2017-06-27 21:14:30
【问题描述】：

我是 Foundation 6 的新手，我正在使用 Foundation-cli 遵循 ZURB 模板。

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

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

我怎样才能做到这一点，以便调用基础监视只会将 scss 文件应用于一个特定的 html 文档？

【问题讨论】：

这种方法背后的驱动力是什么？性能？
是的，因为我的页面非常不同，页面之间共享的 scss 很少，因此当它部署到 Web 时，生成的 css 文件将比需要的大得多。

标签： sass zurb-foundation

【解决方案1】：

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

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

主页.html
Page1.html
Page2.html

创建 3 个.scss 文件：

home.scss
page1.scss
page2.scss

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

需要稍微修改默认的 Foundation 构建脚本 gulpfile.babel.js。只设置编译app.scss。这需要更改以编译/src/assets/scss/ 目录中的所有.scss 文件。

这是simple one-line change。

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

home.css
page1.css
page2.css

接下来，您需要将每个页面链接到相应的 CSS 文件。如果您使用的是静态文件，您可以简单地链接到相应的 CSS 文件。例如：home.html 将使用 home.css：

<link rel="stylesheet" type="text/css" href="home.css">

如果您使用的是使用 Panini 编译页面的 Zurb 模板，则需要更改 default.html 布局。这可以使用 Panini 的 ifpage 设置条件 CSS 文件来完成。

{{#ifpage 'index'}}
<link rel="stylesheet" href="{{root}}assets/css/app.css">
{{/ifpage}}

{{#ifpage 'page1'}}
<link rel="stylesheet" href="{{root}}assets/css/page1.css">
{{/ifpage}}

【讨论】：

如何修改脚本？我有 2 个不同的 scss 文件，一个名为 app.scss（由基础模板生成），一个名为 test.scss（我创建了那个）。然后我有 index.html 和 test.html。当我在目录上运行基础构建时， dist/assets 文件夹中仍然只有 app.css 并且 test.scss 中的任何样式都没有应用于 test.html
您需要修改gulpfile.babel.js。这是一个简单的一行更改 - gist.github.com/brettdewoody/…
谢谢，解决了一个问题。现在生成了多个 css 文件，但是我所有的 html 文档都只包含指向其中生成的 app.css 的链接，而不是它们相关的 css 文件。我知道我可以手动添加它们，但是在使用基础监视命令进行开发时，每当我进行更改时都必须重新添加它们会很烦人。有什么解决办法吗？
有几种方法可以解决这个问题。一种是使用帕尼尼的ifpage 根据页面有条件地链接到不同的.css 文件。
第二种方式：<link rel="stylesheet" href="{{root}}assets/css/{{page}}.css">