我是Foundation 6的新手，并且正在使用foundation-cli跟踪ZURB模板。
我看到一个名为app.scss的scss文件用作被编译为css的根文件，然后将其应用于src / pages中的每个html文档。
我希望能够为站点上仅应用于页面的每个页面创建一个单独的scss文件。
我该怎么做，以便调用Foundation Watch只将一个scss文件应用于一个特定的html文档？
我建议.scss为每个页面创建不同的文件。
例如，如果您有3个不同的页面：
创建3个.scss文件：
这些文件中的每个文件都将导入所需的Foundation模块，并包含相应页面的样式。它们之间可能有一些重叠，没关系。
默认的Foundation构建脚本gulpfile.babel.js将需要稍作修改。它只是要编译的设置app.scss。这将需要更改以编译.scss目录中的所有文件/src/assets/scss/。
这是一个简单的单行更改。
修改gulpfile后，它将创建3个单独的.css文件：
接下来，您需要使每个页面链接到相应的CSS文件。如果您使用的是静态文件，则可以简单地链接到相应的CSS文件。例如：home.html将使用home.css：
<link rel="stylesheet" type="text/css" href="home.css">
如果您使用的Zurb模板使用Panini来编译页面，则需要更改default.html布局。这可以通过使用Paniniifpage设置条件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}}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句