2016-09-07 5 views
2

私はこの私のmain.scss内部構造を持っている:私のindex.htmlインサイド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"; 

を、私は正規化、ブートストラップ・グリッドまたはanimate.cssなどのあるmain.cssと亭またはNPMを経由して、他の外部ライブラリを含み、 。 他のライブラリをインポートする正しい方法は何ですか?前、後、または内部main.scss? 最初の2つのレイヤーにはCSSを出力しないことが重要です。さらに、このファイルは純粋なCSSであり、私は* .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> 

答えて

2

私はサスファイル(_generic.normalize.scss)にNormalize.cssをシンボリックリンクや一般的な層にインポートします。

ブートストラップをSassファイル(_objects.grid.scss)にシンボリックリンクし、それをObjectsレイヤーにインポートします。

これは、ITCSSの順序を維持し、レンダリングブロックCSSを1つのHTTP要求に減らします。

+0

返信いただきありがとうございます。ハリー! –

関連する問題