如何在 ITCSS 项目中包含外部库？答案

【问题标题】：How to include external libraries inside ITCSS project?如何在 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 包含其他外部库，例如 normalize、bootstrap-grid 或 animate.css。导入其他库的正确方法是什么？在 main.scss 之前、之后还是内部？我有这个疑问是因为不要在前 2 层输出任何 CSS，这一点很重要。此外，这些文件通常是纯 css，我不能在我的 *.scss 中 @import 。

谢谢

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

【问题讨论】：

标签： html css sass file-organization itcss

【解决方案1】：

我会将 Normalize.css 符号链接到 Sass 文件 (_generic.normalize.scss) 并将其导入通用层。

我会将 Bootstrap 符号链接到 Sass 文件 (_objects.grid.scss) 并将其导入对象层。

这将保持 ITCSS 顺序正确，并将阻止呈现的 CSS 减少为一个 HTTP 请求。

【讨论】：

感谢您的回复，哈利！