webpack學習(五) -- postcss的使用

postcss使用

功能

• 把css解析爲一個抽象語法樹
• 調用插件處理抽象語法樹並添加功能

下載

//postcss每每不單獨使用
npm install postcss postcss-loader  autoprefixer cssnano postcss-cssnext
//其中autoprefixer是添加前綴的，解決瀏覽器兼容問題。好比：-ms-transform:rotate(7deg); 
//cssnano是處理壓縮的
//postcss-cssnext是另外一種css語法
複製代碼

使用案例

• 當咱們須要處理less文件而不是css文件時，爲了less文件生效，咱們須要先將less轉爲css，再轉爲style或單獨的css文件夾，這時候咱們就須要在webpack配置文件中進行配置
• 如圖爲配置文件，紅色框爲postcss配置部分

注：postcss-loader配置須要放在less-loader上面，css-loader下面，意味着在配置時須要將less進行postcss處理後再轉爲css-loader。 圖中標記的藍色部分爲上述說的css最終兩種處理方式，藍色部分爲經過mini-css-extract-plugin插件將css最終處理爲單獨的css文件；而箭頭所指的紅色配置則爲將css最終處理爲行內樣式。

• postcss不單用，與各類集成工具共同使用

上圖能夠發現postcss-loader配置中多了options對象，他的做用就是配置postcss-loader相關內容

• postcss-loader中的options配置

{
    loader:'postcss-loader',
    options:{
        ident: 'postcss', //說明options裏面插件的使用是針對於誰的，咱們這裏是針對於postcss的
        plugins:[ //這裏的插件只是這對於postcss
            require('autoprefixer')() //引入添加前綴的插件,第二個空括號是將該插件執行
        ]
    }
}
複製代碼

以上是引入了一個增長前綴的postcss插件，下面咱們打包執行一下，看看是什麼效果。 git執行webpack，成功後看咱們的css出口文件indedx.css文件，發現已經給咱們自動添加了前綴，哇，高級高級，趕忙接着看還有什麼好用的插件~

{
    loader:'postcss-loader',
    options:{
        ident: 'postcss', 
        plugins:[ 
            require('cssnano')() //引入壓縮插件
        ]
    }
}
複製代碼

再執行後再看一下index.css，能夠看到已經進行了壓縮

這樣的插件有不少，咱們再來講一下最後一個，我的認爲比較高級的一個插件，就是將cssnext語法轉爲正常的css語法

學到這裏，我又不得不去補一下cssnext知識。哭，本身會的太少啦！關於cssnext作了簡單的瞭解，等小女有時間再系統的學習吧，哭~

繼續學習！這裏先簡單使用一下cssnext的語法，而後將其解析爲正常的css語法。下圖紅框爲cssnext語法，意爲在根元素定義一個color變量爲red，而後在a標籤裏使用該變量。

注：若是使用postcss-cssnext時同時使用了autoprefixer插件，就會報警告的。也就是說，在postcss-cssnext插件中已經徹底支持了autoprefixer插件的功能，因此取一個就好了

去掉autoprefixer插件後，再執行webpack，這時候已經沒有報錯，打開咱們的css出口文件index.css文件，能夠發現，nextcss語法已經變爲css語法，autoprefixer有的添加前綴的功能，也存在

總結

以上就是postcss簡單的配置使用，小女文案功底不太好，知識也是在邊學習邊總結，有不足之處請隨時指出，感謝掘金大佬們對個人監督。好啦，我去學習nextcss了，聽說是下一代css語法O(∩_∩)O~~~