zoukankan      html  css  js  c++  java
  • 如何配置webpack让浏览器自动补全前缀

    一、postcss-loader有什么用?

      PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构(Abstract Syntax Tree,AST),再交由插件来进行处理。插件基于

    CSS 代码的 AST 所能进行的操作是多种多样的,比如可以支持变量和混入(mixin),增加浏览器相关的声明前缀,或是把使用将来的 CSS 规范的样式规则转译(transpile)成当前的 CSS 规范支持的格式。从这

    个角度来说,PostCSS 的强大之处在于其不断发展的插件体系。

      在webpack4. 的配置里面,切记版本不同,postcss-loader的配置会有相应的变化。我们要使用浏览器自动补全工具首先要安装 postcss-loader并配合autoprefixer插件。

    (1)首先将两个必要插件安装到本地依赖。

    npm i postcss-loader autoprefixer -D
    

     (2) 在 webpack 中配置 module,

    module:{
         test: /.less$/, use: [
             'style-loader'
             'css-loader',
             'postcss-loader',
             'less-loader',
         ]
    }
    

     (3) 创建 postcss.config.js文件

    module.exports = {
        plugins: [
            require('autoprefixer')({
                overrideBrowserslist: [
                  "Android 4.1",
                  "iOS 7.1",
                  "Chrome > 31",
                  "ff > 31",
                  "ie >= 8",
                  "> 1%", // 必须大于 1% 用户使用的浏览器
                  //'last 2 versions', // 所有主流浏览器最近的 2个版本
              ],
              grid: true
            })
        ]
    }
    

      当

    当然还有另外一种配置 postcss-loader 的方式

      在 package.json 文件 加:

    "browserslist": [
      "defaults",
      "not ie < 11",
      "last 2 versions",
      "> 1%",
      "iOS 7",
      "last 3 iOS versions"
    ],
    

      然后 创建 postcss.config.js

    module.exports = {
        plugins: [
            require('autoprefixer')()
        ]
    }
    

      

    相信到这里你就会使用 浏览器自动补全工具啦

  • 相关阅读:
    Oracle 执行计划(Explain Plan) 说明
    RMAN backup recovery area 命令
    Linux 终端访问 FTP 及 上传下载 文件
    Putty 工具 保存配置的 小技巧
    Oracle 补丁体系 及 opatch 工具 介绍
    闪回恢复区 (Flash Recovery Area)
    Oracle 10g OCP 043 题库 141185题 共185题
    Oracle 补丁体系 及 opatch 工具 介绍
    ORA16401 archivelog rejected by RFS 解决方法
    多表连接的三种方式详解 HASH JOIN MERGE JOIN NESTED LOOP
  • 原文地址:https://www.cnblogs.com/chase-star/p/13233825.html
Copyright © 2011-2022 走看看