CSS 工程化 小結

CSS 工程化 

組成：1.組織 （代碼目錄）2.優化（那種實現方式更好） 3.構建（代碼完成後須要通過哪些處理步驟） 4.維護

常見問題

1.如何解決 CSS 模塊化問題

 1.Less Sass 等CSS 預處理器

2.PostCSS 插件 （postcss-import / precss 等）

3.webpack 處理 CSS (css-loader + style-loader)

2.PostCSS 能夠作什麼

1.取決於插件能夠作什麼

2.autoprefixer cssnext precss 等 兼容性處理

3.import 模塊合併

4.CSS 語法檢查 兼容性檢查

5.壓縮文件

3.CSS modules 是作什麼的

1.解決類名衝突的問題

使用：使用 PsostCSS 或者 webpack 等構建工具進行編譯；在 HTML 模板中使用編譯過程產生的類名

4.爲何使用 JS 來引用、加載 css

1.JS 做爲入口，管理資源有自然優點

2.將組件的結構、樣式、行爲封裝到一塊兒，加強內聚

3.能夠作更多處理（webpack）

知識點：

PostCSS

1.PostCSS 自己只有解析能力  2.特性所有靠插件實現

經常使用插件（學習點擊這篇博客，下圖爲部份內容）

1.import (模塊合併）

2.autoprefixier (自動加前綴）

3.cssnano (壓縮代碼）

4.cssnext 使用 CSS 新特性

5.precss 變量、mixin、循環等（跟預處理器很類似）

webpack  （中文文檔）

核心思想：1.JS 是整個應用的核心入口 2.一切資源均由 JS 管理依賴  3.一切資源均由 webpack 打包

入門 webpack ，看這篇博客 寫的很是詳細

webpack 和 css

1.css-loader 將 CSS 變成 JS

2.style-loader 將 JS 樣式插入 head

3.EXtractTextPlugin 將 CSS 從 JS 中提取出來

4.CSS modules 解決 CSS 命名衝突的問題

5.less-loader sass-loader 各種預處理器