1.PostCSS介绍
CSS工程化:
组织、优化、构建、维护
PostCSS:
PostCSS本身只有解析能力
各种神奇的特性全靠插件
PostCSS插件:
1.import 模块合并
2.autoprefixer 自动加前缀
3.cssnano 压缩代码
4.cssnext 使用CSS新特性
5.precess 变量、mixin、循环等
PostCSS优势主要体现在以下几个方面:
1.拥有极高的处理性能(3倍以上的处理速度)
2.你既可以写正常的CSS,也可以结合LESS或者SASS一起编写
3.对Source Map支持更好
4.他的插件真的太多太强大太便利了
官方对于插件根据用途做了分类,主要有以下几个类别:
1.解决全局CSS问题
2.使用未来的CSS语法
3.编写可读性更好的CSS
4.用于图片和字体
5.CSS语法检查
其他
PostCSS学习资料参考:
https://www.w3cplus.com/blog/tags/516.html
https://www.cnblogs.com/dll-ft/p/5811639.html
https://segmentfault.com/a/1190000010926812#articleHeader3
https://github.com/whidy/postcss-study
https://www.w3cplus.com/PostCSS/postcss-deep-dive-what-you-need-to-know.html
https://www.w3cplus.com/PostCSS/postcss-quickstart-guide-gulp-setup.html
https://blog.csdn.net/zl_best/article/details/80252591
https://www.cnblogs.com/goodbeypeterpan/p/5706594.html
https://www.postcss.com.cn/
https://segmentfault.com/a/1190000014782560
2.PostCSS插件的使用
1.直接使用postcss-cli:
安装postcss-cli和编译
cnpm install postcss-cli
./node_modules/.bin/postcss ./src/css/style.css -o ./src/build/01-postcss.css
使用postcss.config.js
//首先安装插件autoprefixer
npm install autoprefixer
//插件postcss.config.js
const autoprefixer = require('autoprefixer');
module.exports = {
plugins:[
autoprefixer({
browsers:['last 2 versions']
}),
]
};
编译
./node_modules/.bin/postcss ./src/css/style.css -o ./src/build/01-postcss.css
再添加postcss-import插件
npm install postcss-import
@import "style1.css";
.box{
box-shadow:0 0 3px rgba(255,255,255,.3);
}
//style1.css
*{
padding:0px;
margin:0px;
}
//postcss.config.js
const autoprefixer = require('autoprefixer');
const atImport = require('postcss-import');
module.exports = {
plugins:[
atImport,
autoprefixer({
browsers:['last 2 versions']
}),
]
};
//编译
./node_modules/.bin/postcss ./src/css/style.css -o ./src/build/01-postcss.css
//最后编译结果
*{
padding:0px;
margin:0px;
}
.box{
-webkit-box-shadow:0 0 3px rgba(255,255,255,.3);
box-shadow:0 0 3px rgba(255,255,255,.3);
}
postcss.config.js再添加cssnano插件(代码压缩)
const autoprefixer = require('autoprefixer');
const atImport = require('postcss-import');
const cssnano = require('cssnano');
module.exports = {
plugins:[
atImport,
cssnano,
autoprefixer({
browsers:['last 2 versions']
}),
]
};
最后压缩后代码:
*{padding:0;margin:0}.box{-webkit-box-shadow:0 0 3px hsla(0,0%,100%,.3);box-shadow:0 0 3px hsla(0,0%,100%,.3)}
postcss.config.js再添加cssnext(使用未来的CSS,可能现在浏览器支持性还不是很好的特性)和precss(像预处理器)插件:
const autoprefixer = require('autoprefixer');
const atImport = require('postcss-import');
const cssnano = require('cssnano');
const cssnext = require('postcss-cssnext');
const precss = require('precss');
module.exports = {
plugins:[
atImport,
cssnano,
cssnext,
precss,
autoprefixer({
browsers:['last 2 versions']
}),
]
};
2.gulp中使用PostCSS
PostCSS支持的构建工具:
CLI命令行工具
webpack postcss-loader
Gulp gulp-postcss
Grunt grunt-postcss
Rollup rollup-postcss
…
也可以查看这篇文章使用介绍:https://aotu.io/notes/2015/10/13/start-postcss/index.html
首先生成package.json文件
# --yes 参数能够帮助我们快速生成默认的package.json
npm init --yes
将上面创建的package.json文件的main参数改为gulpfile.js,然后安装我们所需的依赖
# gulp跟gulp-postcss是必须的,后面两个插件为了演示用途
npm i gulp gulp-postcss autoprefixer autoprefixer-core postcss-cssnext --save-dev -d
package.json文件内容如下:
//package.json
{
"name": "postcss",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.5.0",
"autoprefixer-core": "^6.0.1",
"gulp": "^4.0.0",
"gulp-postcss": "^8.0.0",
"postcss-cssnext": "^3.1.0"
}
}
创建gulpfile.js
# 这里用命令行进行创建,你也可以手动新建
touch gulpfile.js
将下面代码贴进gulpfile.js
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnext = require('postcss-cssnext');
//定义css任务
gulp.task('css', function(){
//定义postcss任务流数组
var processors = [
autoprefixer({
browsers:['last 3 version'],
cascade: false,
remove: false
}),
cssnext()
];
return gulp.src('./src/css/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dist'));
});
创建示例样式style.css,然后根文件目录下运行gulp css编译
h1{
display:flex;
}
:root {
--fontSize: 1rem;
--mainColor: #12345678;
--highlightColor: hwb(190, 35%, 20%);
}
body {
color: var(--mainColor);
font-size: var(--fontSize);
line-height: calc(var(--fontSize) * 1.5);
padding: calc((var(--fontSize) / 2) + 1px);
}
3.Webpack中使用PostCSS
Webpack:
JS是整个应用的核心入口
一切资源均由JS管理依赖
一切资源均由webpack打包
Webpack中使用PostCSS可以参考:https://blog.csdn.net/u010982507/article/details/81412335
https://www.cnblogs.com/cangqinglang/p/8964460.html
我们执行时候webpack时候,显示报错,Cannot find module ‘webpack’。
我们可以尝试下面的命令:
./node_modules/.bin/webpack src/index.js dist/index.bundle.js
我们还要注意Webapck的配置,webpack4.x版本和之前配置差别挺大的。
3.css-modules和extract-text-plugin
ExtractTextPlugin将CSS从JS中提取出来
css modules解决CSS命名冲突的问题
extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。
参考文章:
https://www.jianshu.com/p/ed3c98ba5474
css modules:
解决类名冲突的问题
使用PostCSS或者webpack等构建工具中基础使用,进行编译
在HTML模板中使用编译过程产生的类名。
参考文章:
https://www.jianshu.com/p/15caa7af321c
https://segmentfault.com/a/1190000010301977
4.webpack小结
css-loader将CSS变成JS
style-loader将JS样式插入head
ExtractTextPlugin将CSS从JS中提取出来
css modules解决CSS命名冲突的问题
less-loader sass-loader各类预处理器
postcss-loader PostCSS处理
5.CSS面试真题
1.如何解决CSS模块化问题
Less Sass等预处理器
PostCSS插件(postcss-import/precss等)
webpack处理CSS(css-loader+style-loader)
2.PostCSS可以做什么?
取决于插件可以做什么
autoprefixer cssnext precss等 兼容性处理
import模块合并
css语法检查 兼容性检查
压缩文件
3.CSS modules是做什么的,如何使用
解决类名冲突的问题
使用PostCSS或者webpack等构建工具中基础使用,进行编译
在HTML模板中使用编译过程产生的类名。
4.为什么使用JS来引用、加载CSS
JS作为入口,管理资源有天然优势
将组件的结构、样式、行为封装到一起,增强内聚
可以做更多处理(webpack)