【全面系統講解CSS】學習筆記-第九章 CSS工程化方案

一、概述

在這裏插入圖片描述

1.1、PostCSS

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

二、PostCSS插件的使用

全局安裝postcss工具。

npm install postcss-cli -g

在這裏插入圖片描述
編譯css
在這裏插入圖片描述

2.1、autoprefixer的使用

首先需要安裝autoprefixer插件

npm install autoprefixer

在這裏插入圖片描述在這裏插入圖片描述
在這裏插入圖片描述

2.2、postcss-import的使用

在這裏插入圖片描述
在這裏插入圖片描述
如上圖,如果是這樣引入css文件的話,就會調用兩個請求。如果用下面的這個插件後重新編譯,那麼就會合並css文件。
在這裏插入圖片描述

2.3、cssnano的使用

cssnano是用來壓縮代碼的
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

2.4、cssnext的使用

在這裏插入圖片描述
在這裏插入圖片描述
這個插件也需要npm安裝。
在這裏插入圖片描述
執行編譯後
在這裏插入圖片描述

2.5、precss的使用

在這裏插入圖片描述
在這裏插入圖片描述
需要安裝過插件。配置執行後如下面的圖。
在這裏插入圖片描述
在這裏插入圖片描述

2.6、glup-postcss構建工具的使用

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

四、webpack插件的使用

在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
html引用了打包後的js文件。
在這裏插入圖片描述
在這裏插入圖片描述

4.1、webpack處理css

安裝css加載插件
在這裏插入圖片描述
創建配置文件,webpack.config.js是webpack配置文件的默認文件名。
在這裏插入圖片描述
PS:後期繼續

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章