初识PostCss

初识PostCss

本节主要讲PostCss的定位,结合webpack介绍了PostCss主要的几个插件,autoprefixer、postcss-cssnext、postcss-modules、lost、stylelint等。

01-20侠课岛    初级拔高       

前端/前端/前端系列课程P2 17     0     426

(四)初识PostCss

1:认识PostCss

  • 两个概念

    • pre-processor(预处理器)

      Sass
      Less
      Stylus
    • post-processor(后处理器)

    CSS Prefixer
  • 官方定义

    PostCSS is a tool for transforming CSS with JS plugins.
    These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
    
    PostCSS是一个用JS插件转换CSS的工具。这些插件可以支持变量和混合,转换未来的CSS语法,内联图像等。
    
    把 CSS 代码解析成抽象语法树结构(Abstract Syntax Tree,AST),再交由插件来进行处理
  • PostCss定位

    既不是预处理器
    也不是后处理器
    插件系统,css领域的webpack,整合预处理器和后处理器
  • PostCss使用

    一般不单独使用,与已有的构建工具Webpack、Grunt和Gulp进行集成
    最广泛的是与Webpack集成

2:与Webpack集成

  • 搭建webpack环境

    • package.json
    npm init
    {
      "name": "postcss",
      "version": "1.0.0",
      "description": "learn postcss",
      "main": "index.js",
      "scripts": {
        "build": "webpack --config webpack.config.js"
      },
      "author": "eric",
      "license": "ISC",
      "devDependencies": {}
    }
    • webpack依赖包
    npm install webpack webpack-cli --save-dev
    • webpack.config.js
    const path = require('path');
    
    module.exports = {
      entry: './index.js',
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
      },
    };
    • 打包index.js
    import './style.css';
    
    function app() {
      var element = document.createElement('div');
      element.innerHTML = 'Hello Word!';
      element.classList.add('header');
      return element;
    }
    
    document.body.appendChild(app());
    • 分离css
    npm install css-loader --save-dev
    npm install extract-text-webpack-plugin@next --save-dev
    npm install postcss-loader --save-dev
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    ...
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
              fallback: "style-loader",
              use: [
                "css-loader",
              ]
          })
        }
      ]
    },
    plugins: [
      new ExtractTextPlugin("bundle.css"),
    ]
    ...

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

17

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?