(13/24) css進階:自動處理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
、Grun
t 和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‘
]
})
}
分離插件使用
4.給src/index.css下#img添加一些css3樣式。
transform:rotate(45deg);
box-shadow: 1px 1px 0 #000000;
5.打包
在終端使用webpack
命令進行打包.
webpack
結果為,自動加上css3屬性前綴。
(13/24) css進階:自動處理css3屬性前綴