什么是属性前缀
我们先来看一下代码:
1
2
|
-webkit-transform
:
rotate
(
45deg
)
;
transform
:
rotate
(
45deg
)
;
|
为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。
PostCSS
PostCSS是一个CSS的处理平台,它可以帮助你的CSS实现更多的功能,但是今天我们就通过其中的一个加前缀的功能,初步了解一下PostCSS。
安装
需要安装两个包postcss-loader 和autoprefixer(自动添加前缀的插件)
1
|
npm
install
--
save
-
dev
postcss
-
loader
autoprefixer
|
postcss.config.js
postCSS推荐在项目根目录(和webpack.config.js同级),建立一个postcss.config.js文件。
postcss.config.js
1
2
3
4
5
|
module
.
exports
=
{
plugins
:
[
require
(
'autoprefixer'
)
]
}
|
这就是对postCSS一个简单的配置,引入了autoprefixer插件。让postCSS拥有添加前缀的能力,它会根据 can i use 来增加相应的css3属性前缀。
编写loader
对postcss.config.js配置完成后,我们还需要编写我们的loader配置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
{
test
:
/
\
.
css
$
/
,
use
:
[
{
loader
:
"style-loader"
}
,
{
loader
:
"css-loader"
,
options
:
{
modules
:
true
}
}
,
{
loader
:
"postcss-loader"
}
]
}
|
提取CSS
配置提取CSS的loader配置.
1
2
3
4
5
6
7
8
9
10
11
|
{
test
:
/
\
.
css
$
/
,
use
:
extractTextPlugin
.
extract
(
{
fallback
:
'style-loader'
,
use
:
[
{
loader
:
'css-loader'
,
options
:
{
importLoaders
:
1
}
}
,
'postcss-loader'
]
}
)
}
|
总结:postcss还有很多功能,我希望小伙伴学会自学。这里给出postcss-loader的github地址:https://github.com/postcss/postcss-loader