本节知识点
- 自动添加css3前缀,以期待浏览器的识别
PostCSS
- PostCSS是一个CSS的处理平台,他有很多功能,本节主要是利用加前缀的功能
(一)安装
- 主要需要两个包 postcss-loader 和autoprefixer(自动添加前缀的插件)
npm install postcss-loader autoprefixer --save-dev
- postcss.config.js 在webpack.config.js同级目录下建一个文件
postCSS推荐在项目根目录(和webpack.config.js同级),建立一个postcss.config.js文件
module.exports = {
plugins:[
require('autoprefixer')
]
}
- 编写loader
要是提取css就这样写
{
test:/\.css$/,
use: extracTextPlugin.extract({
fallback: "style-loader",
use:[
{loader:"css-loader",options:{importLoaders:1}},
"postcss-loader"
]
})
},
要是不提取CSS就这样写
{
test: /\.css$/,
use:[
{loader:"style-loader"},
{
loader:"css-loader",
options:{
modules: true
}
} ,
{
loader:"postcss-loader"
}
]
}