慕课网CSS工作应用+面试（8）CSS工程化PostCSS

Bertha 。 2022-02-28 07:08 237阅读 0赞

**1.PostCSS介绍**

CSS工程化：  
组织、优化、构建、维护

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]  
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.w3cplus.com_blog_tags_516.html]  
[https://www.cnblogs.com/dll-ft/p/5811639.html][https_www.cnblogs.com_dll-ft_p_5811639.html]  
[https://segmentfault.com/a/1190000010926812\#articleHeader3][https_segmentfault.com_a_1190000010926812_articleHeader3]  
[https://github.com/whidy/postcss-study][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-deep-dive-what-you-need-to-know.html]  
[https://www.w3cplus.com/PostCSS/postcss-quickstart-guide-gulp-setup.html][https_www.w3cplus.com_PostCSS_postcss-quickstart-guide-gulp-setup.html]  
[https://blog.csdn.net/zl\_best/article/details/80252591][https_blog.csdn.net_zl_best_article_details_80252591]  
[https://www.cnblogs.com/goodbeypeterpan/p/5706594.html][https_www.cnblogs.com_goodbeypeterpan_p_5706594.html]  
[https://www.postcss.com.cn/][https_www.postcss.com.cn]  
[https://segmentfault.com/a/1190000014782560][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']
    		}),
    	
    	]
    	
    };

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]

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][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_blog.csdn.net_u010982507_article_details_81412335]  
[https://www.cnblogs.com/cangqinglang/p/8964460.html][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][https_www.jianshu.com_p_ed3c98ba5474]

css modules：  
解决类名冲突的问题  
使用PostCSS或者webpack等构建工具中基础使用，进行编译  
在HTML模板中使用编译过程产生的类名。

参考文章：  
[https://www.jianshu.com/p/15caa7af321c][https_www.jianshu.com_p_15caa7af321c]  
[https://segmentfault.com/a/1190000010301977][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）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220228/192a80ca1e7a4f458443d3a545d498ff.png
[https_www.w3cplus.com_blog_tags_516.html]: https://www.w3cplus.com/blog/tags/516.html
[https_www.cnblogs.com_dll-ft_p_5811639.html]: https://www.cnblogs.com/dll-ft/p/5811639.html
[https_segmentfault.com_a_1190000010926812_articleHeader3]: https://segmentfault.com/a/1190000010926812#articleHeader3
[https_github.com_whidy_postcss-study]: 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-deep-dive-what-you-need-to-know.html
[https_www.w3cplus.com_PostCSS_postcss-quickstart-guide-gulp-setup.html]: https://www.w3cplus.com/PostCSS/postcss-quickstart-guide-gulp-setup.html
[https_blog.csdn.net_zl_best_article_details_80252591]: https://blog.csdn.net/zl_best/article/details/80252591
[https_www.cnblogs.com_goodbeypeterpan_p_5706594.html]: https://www.cnblogs.com/goodbeypeterpan/p/5706594.html
[https_www.postcss.com.cn]: https://www.postcss.com.cn/
[https_segmentfault.com_a_1190000014782560]: https://segmentfault.com/a/1190000014782560
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220228/ace9760e1cac43a28597dfa7c1f766b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20220228/4c916dd1494147098c47b8497b761fca.png
[https_aotu.io_notes_2015_10_13_start-postcss_index.html]: https://aotu.io/notes/2015/10/13/start-postcss/index.html
[https_blog.csdn.net_u010982507_article_details_81412335]: https://blog.csdn.net/u010982507/article/details/81412335
[https_www.cnblogs.com_cangqinglang_p_8964460.html]: https://www.cnblogs.com/cangqinglang/p/8964460.html
[https_www.jianshu.com_p_ed3c98ba5474]: https://www.jianshu.com/p/ed3c98ba5474
[https_www.jianshu.com_p_15caa7af321c]: https://www.jianshu.com/p/15caa7af321c
[https_segmentfault.com_a_1190000010301977]: https://segmentfault.com/a/1190000010301977