如何在ITCSS项目中包含外部库?
问题描述:
我有这个结构我main.scss内:如何在ITCSS项目中包含外部库?
//******** 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并通过凉亭或NPM,其他外部库,如正常化,引导电网或animate.css 。 导入其他库的正确方法是什么?在main.scss之前,之后或内部?我有这个疑问,因为重要的是不要在前2层输出任何CSS。此外,通常这个文件是纯CSS,我不能@import在我的* .scss里面。
感谢
<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>
答
我想符号链接Normalize.css到萨斯文件(_generic.normalize.scss
),并将其导入通用层。
我将符号链接Bootstrap到一个Sass文件(_objects.grid.scss
)并将其导入到Objects层。
这将保持ITCSS顺序为真,并将渲染阻塞CSS减少为仅一个HTTP请求。
感谢您的回复,Harry! –