Sass 基金会6将SCSS文件应用于各个页面 我是基金会6的新手，我使用基础CLI遵循ZURB模板。

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

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

---

我如何做到这一点，以便调用FieldWalk只将一个SCSS文件应用到一个特定的HTML文档？

< P>我建议为每个页面创建不同的<代码> .SCSS文件。 例如，如果您有3个不同的页面：

• Home.html
• 页面1.html
• 页面2.html

创建3个

.scss

文件：

• home.scss
• 第1.scss页
• 第2.scss页

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

默认基础生成脚本<代码> GulpFrase.Babel.js需要稍加修改。它只用于编译

app.scss

。这需要更改以编译

/src/assets/scss/

目录中的所有

.scss

文件

这是一个好主意

修改gulpfile后，它将创建3个独立的

.css

文件：

• home.css
• 页面1.css
• 第2.css页

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

home.html

将使用

home.css

：

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

---

这种方法背后的驱动力是什么？性能？是的，由于我的页面非常不同，页面之间共享的SCS非常少，因此当它部署到web上时，生成的css文件将比需要的大得多。如何修改脚本？我有2个不同的SCSS文件，一个名为App.SCSS（由基础模板生成）和一个名为Test.SCSS（我创建了一个）。然后是index.html和test.html。当我在目录上运行基础构建时，DIST/Stask文件夹中只包含App.CSS，而Test.SCSS中的任何样式都不适用于Test.HTML.您需要修改<代码> GulpFrase.Babel.js。这是一个简单的单行更改-谢谢，解决了一个问题。现在生成了多个css文件，但是我所有的html文档都只有指向它们内部生成的app.css的链接，而没有它们的相关css文件。我知道我可以手动添加它们，但是当使用基金会监视命令开发时，每当我做出改变时，都不得不添加它们，这将是恼人的。有什么解决办法吗？有几种方法可以解决这个问题。一种是使用Panini有条件地链接到不同的

.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}}