• PostCSS 基本用法


    1、postcss相关网站

    https://www.postcss.com.cn/

    https://www.ibm.com/developerworks/cn/web/1604-postcss-css/

    2、介绍

    PostCSS 的主要功能只有两个:第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 抽象语法树结构(Abstract Syntax Tree,AST),第二个就是调用插件来处理 AST 并得到结果。

    PostCSS 一般不单独使用,而是与已有的构建工具进行集成。PostCSS 与主流的构建工具,如 Webpack、Grunt 和 Gulp 都可以进行集成。完成集成之后,选择满足功能需求的 PostCSS 插件并进行配置。

    Webpack 中使用 PostCSS 插件示例:

    var path = require('path');
     
    module.exports = {
     context: path.join(__dirname, 'app'),
     entry: './app',
     output: {
       path: path.join(__dirname, 'dist'),
       filename: 'bundle.js'
     },
     module: {
       loaders: [
         {
           test:   /.css$/,
           loader: "style-loader!css-loader!postcss-loader"
         }
       ]
     },
     postcss: function () {
       return [require('autoprefixer')];
     }
    }

    postcss-loader 用来对.css 文件进行处理,并添加在 style-loader 和 css-loader 之后。通过一个额外的 postcss 方法来返回所需要使用的 PostCSS 插件。require('autoprefixer') 的作用是加载 Autoprefixer 插件。

    3、总结

    通过 PostCSS 强大的插件体系,可以对 CSS 进行各种不同的转换和处理,从而尽可能的把繁琐复杂的工作交由程序去处理,而把开发人员解放出来。

  • 相关阅读:
    宿主机无法访问CentOS7上Jenkins服务的解决办法
    415. Add Strings
    367. Valid Perfect Square
    326. Power of Three
    258. Add Digits
    231. Power of Two
    204. Count Primes
    202. Happy Number
    172. Factorial Trailing Zeroes
    171. Excel Sheet Column Number
  • 原文地址:https://www.cnblogs.com/lguow/p/10779062.html
Copyright © 2020-2023  润新知