Install
npm i -D postcss-loader
webpack.config.js (recommended)
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
}
]
}
}
loader 应用顺序
一个匹配规则中可以配置使用多个 loader,即一个模块文件可以经过多个 loader 的转换处理,执行顺序是从最后配置的 loader 开始,一步步往前。例如,一个 css 文件会途径 postcss-loader、css-loader、style-loader 处理,成为一个可以打包的模块。
loader 的应用顺序在配置多个 loader 一起工作时很重要。
postcss 插件
安装
npm install postcss-import cssnano --save-dev
postcss-import
使用postcss-import插件,遵循@import
规则,你可以将reset.css
样式合并到你的主样式表中,减少http
请求。
@import 'reset.css';
cssnext
Use tomorrow's CSS ,today!
可以在样式表中利用 cssnext 额外增加的一些 css 规范。cssnext 是一个 PostCSS 的包,其中包含了大量的特性组件,比如 custom properties 和 custom selectors。
cssnext 中已经包含了对 Autoprefixer 的使用,因此使用了 cssnext 就不再需要使用 Autoprefixer。
/* custom properties */
:root {
--heading-color: #ff0000;
}
/* custom selectors */
@custom-selector :--headings h1, h2, h3, h4, h5, h6;
/* usage */
:--headings {
color: var(--heading-color);
}
css-mqpacker
css-mqpacker插件可以找到样式表中相同的媒体查询样式合并到一个媒体查询中。这样允许你在写CSS的时候,媒体查询可以重复编写,你也不用担心这样会对你的样式产生冗余代码,而影响你的效率。
cssnano
非常强大的CSS优化的插件包
cssnano优化包括下面一些类型:
删除空格和最后一个分号
删除注释
优化字体权重
丢弃重复的样式规则
优化calc()
压缩选择器
减少手写属性
合并规则
webpack配置
webpack.config.js
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: 'postcss-loader',
options:{
// ident: 'postcss',
plugins: (loader) => [
require('postcss-import')({ root: loader.resourcePath }),
require('postcss-cssnext')(),
require('autoprefixer')(),
//require('cssnano')()
]
}
}],
// 在开发环境使用 style-loader
fallback: "style-loader"
})
}
网友评论