PostCSS_自動處理css3屬性前綴

什么是屬性前綴?

為了瀏覽器的兼容性，有時候我們必須加入-webkit,-ms,-o,-moz這些前綴。目的就是讓我們寫的頁面在每個瀏覽器中都可以順利運行。
例如：

transition: width 2s;
-moz-transition: width 2s;  /* Firefox 4 */
-webkit-transition: width 2s;   /* Safari 和 Chrome */
-o-transition: width 2s;    /* Opera */

　　

使用插件來幫助我們進行前綴的自動添加，會大大提升我們的開發效率，提供編碼效率。
此次是關於如何通過postcss-loader給css3屬性自動添加前綴的。

 

Postcss   

Postcss 的主要功能只有兩個：第一個就是前面提到的把css解析成 JavaScript可以操作的 抽象語法樹結構（Abstract Syntax Tree，AST），第二個就是調用插件來處理 AST並得到結果。
Postcss一般不單獨使用，而是與已有的構建工具進行集成。Postcss 與主流的構建工具，如 webpack、Grunt 和Gulp 都可以進行集成。完成集成之后，選擇滿足功能需求的 Postcss插件並進行配置。
postcss-loader 用來對.css文件進行處理，並添加在 style-loader和 css-loader 之后。通過一個額外的postcss方法來返回所需要使用的PostCSS插件。require(‘autoprefixer‘) 的作用是加載 Autoprefixer插件。

 

1.安裝

需要安裝兩個包postcss-loader 和autoprefixer（自動添加前綴的插件）

npm install --save-dev postcss-loader autoprefixer

　　

 

2.新建postcss.config.js

postCSS推薦在項目根目錄（和webpack.config.js同級），建立一個postcss.config.js文件。
postcss.config.js:

module.exports = {
    plugins: [
        require(‘autoprefixer‘)
    ]
}

　　

這就是對postCSS一個簡單的配置，引入了autoprefixer插件。讓postCSS擁有添加前綴的能力，它會根據 can i use來增加相應的css3屬性前綴。

 

3.配置可分離css的loader

postcss.config.js配置完成后，編寫loader配置。

const extractTextPlugin = require("extract-text-webpack-plugin")
{
    test: /\.css$/,
    use: extractTextPlugin.extract({
        fallback: ‘style-loader‘,
        use: [
            { loader: ‘css-loader‘, options: { importLoaders: 1 } },
            ‘postcss-loader‘
        ]
    })
}

資源網站大全 https://55wd.com 我的007辦公資源網站 https://www.wode007.com

4.給src/index.css下#img添加一些css3樣式。

transform:rotate(45deg);
 box-shadow: 1px 1px 0 #000000;

 

5.打包

在終端使用webpack命令進行打包.

webpack

　　

結果為，自動加上css3屬性前綴。