阅读 436

webpack5(二)浏览器兼容处理-CSS

在webpack中通过工程化处理兼容问题,例如对css处理的postcss,对js处理的babel等等工具,这些工具又依赖于browserslist收集的浏览器信息

browserslist

用于在不同前端工具之间共享目标浏览器和 Node.js 版本的配置文件

在各大框架中脚手架默认帮我们配置了browserslist,以下是vue的默认配置

> 1%   // 市场占有率大于1%
last 2 versions // 最后两个版本(最新的两个大版本)
not dead  // 浏览器24个月内有官方支持或更新
复制代码

以上查询是并集结果查询,还可以指定浏览器查询,交集查询等。具体使用可查阅官网。
条件查询依赖的是caniuse-lite工具,这个工具的数据来自于caniuse网站上。

1. 配置

  • 方式一

.browserslistrc

>1%
last 2 version
not dead
复制代码
  • 方式二

package.json

"browserslist": [
    "> 1%",
    "last 2 version",
    "not dead"
  ]
复制代码
  • 方式三

根据环境变量配置不同的条件,具体查阅官网

2. 命令行查询

npx browserslist
复制代码

browserslist.png

postcss

PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则(通过把 CSS 规则转换成一个抽象语法树的方式)。在这之后,这个 API 便可被许多插件利用来做有用的事情,比如寻错或自动添加 CSS vendor 前缀。

autoprefixer

为css添加浏览器内核前缀

  1. 下载
npm i postcss-loader autoprefixer -D
复制代码
  1. 使用

webpack.config.js

  module: {
    // 模块配置
    rules: [
      // 规则 对模块(module)应用 loader,或者修改解析器(parser)
      {
        test: /\.css$/, // 正则匹配
        use: ['style-loader', 'css-loader', 'postcss-loader'] // 官网:Loaders 可以通过传入多个 loaders 以达到链式调用的效果,它们会从右到左被应用(从最后到最先配置)
      },
      {
        test: /\.less$/, // less 解析配置
        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
      }
    ]
  }
复制代码

postcss.config.js

module.exports = {
  plugins: [
    'autoprefixer'
  ]
}
复制代码

编译后结果

autoprefixer.png

postcss-preset-env

不但可以自动添加前缀,还能帮助转换新特性

使用方式同上,先下载后配置。效果如下

.content {
  color: red;
}

:fullscreen {
} 
.content {
  color: #12345678;
  user-select: none;
  transition: all 3s ease;
}
复制代码

postcss-preset-env.png

问题:当通过css加载其他css时发现postcss-loader不生效了

importloader.png

@import-bug.png

解决:配置options

      {
        test: /\.css$/, // 正则匹配
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1 //设置在 css-loader 前应用的 loader 数量
            }
          },
          'postcss-loader'
        ]
      },
复制代码
文章分类
前端
文章标签