CSS工程化
- 组织
- 优化
- 构建
- 维护
PostCSS
-
介绍
- PostCSS本身只有解析能力
- 各种神奇的特性全靠插件
-
目前至少有200多个插件
-
常见插件
- import 模块合并
- autoprefixer 自动加前缀
- cssnano 压缩代码
- cssnext 使用css新特性,类似es6使用的bulb
- precss变量、mixin、循环等
postcss有自己的脚手架
npm install postcss-cli
./node_modules/.bin/postcss test.css -o test2.css
在postcss.config.js文件中引入插件
const autoprefixer = require('autoprefixer');
module.exports={
plugins:[
autoprefixer({
browerse:['Firefox > 1']// 浏览器BrowserList
})
]
}
- PostCSS支持的构建工具
- cli 命令行工具
- webpack postcss-loader
- gulp gulp-postcss
- grunt grunt-postcss
- rollup rollup-postcss
webpack
- 核心思想
- JS是整个应用的核心
- 一切资源均有JS管理依赖
- 一切资源均有webpack打包
npm install webpack
webpack test.js test1.js
- webpack处理css
在js文件中require(xxx.css)；
npm install css-loader style-loader
// css-loader 将css文件变为js文件
// style-loader 将JS样式插入head
在webpack.config.js中
module.exports = {
module:{
rule:[{
test:/\.css$/,
use:['style-loader','css-loader']
}]
}
}
-
css-modules和extract-text-plugin
- css-modules 避免组件样式产生冲突，实现组件样式封装
module.exports = { module:{ rule:[{ test:/\.css$/, use:['style-loader',{ loader:'css-loader', options:{ modules:true } }] }] } } 在js中 var style =require（test.css） <div class='red'></div>=>改为<div class=style.red></div>- extract-text-plugin
Plugins:new ExtractTextPlugin('xxx.css')将CSS从JS中提取出来，样式通过css来加载，而不是将css变成js文件!
