如何在ITCSS项目中包含外部库？
如何在ITCSS项目中包含外部库？
提问于 2016-09-07 11:03:21
我的main.scss中有这样的结构：
//******** ITCSS layers :: https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
//** 1. Settings – used with preprocessors and contain font, colors definitions, etc.
//** 2. Tools – globally used mixins and functions. It’s important not to output any CSS in the first 2 layers.
//** 3. Generic – reset and/or normalize styles, box-sizing definition, etc. This is the first layer which generates actual CSS.
//** 4. Elements – styling for bare HTML elements (like H1, A, etc.). These come with default styling from the browser so we can redefine them here.
//** 5. Objects – class-based selectors which define undecorated design patterns, for example media object known from OOCSS
//** 6. Components – specific UI components. This is where majority of our work takes place and our UI components are often composed of Objects and Components
//** 7. Trumps – utilities and helper classes with ability to override anything which goes before in the triangle, eg. hide helper class
//********
// Settings
@import "settings/settings.global";
// Tools
@import "tools/tools.extend";
@import "tools/tools.mixin";
// Elements
@import "elements/elements.page";
// Components
@import "components/components.overlay";
@import "components/components.slice";
@import "components/components.text";
// Trumps
@import "trumps/trumps.utilities";在我的index.html中，我包括main.css和通过bower或npm，其他外部库，如标准化、引导网格或animate.css。导入其他库的正确方法是什么？在main.scss之前、之后还是内部？我对此表示怀疑，因为在前2层中不输出任何CSS是很重要的。此外，通常是纯css文件，我不能在中@导入该文件。
谢谢
<head>
<!--build:css css/main.min.css -->
<link rel="stylesheet" href="bower_components/normalize-css/normalize.css">
<link rel="stylesheet" href="bower_components/bootstrap-v3-grid/bootstrap-v3-grid.css">
<link rel="stylesheet" href="style/css/main.css">
<!-- endbuild -->
</head>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-11-11 22:14:50
我会将Normalize.css符号链接到Sass文件(_generic.normalize.scss)，并将其导入泛型层。
我会将引导程序符号链接到Sass文件(_objects.grid.scss)，并将其导入对象层。
这将保持ITCSS顺序的正确性，并将您的呈现阻塞CSS减少为一个HTTP请求。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39368170
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号