1 概述

大家知道,前端最让人头疼的,就是浏览器适配问题。

而H5最大的作用,我认为就是多平台适配得到很好的解决。

但是适配并不是语言天生自带的功能,需要用到一些优秀的插件来完成。

之所以跟css编译分开讲,是因为这是一块单独且实战中用处很大的内容。

2 安装

样式适配需要引入第三方插件。

单个安装:

npm install autoprefixer -D

npm install postcss-px-to-viewport -D

npm install postcss-aspect-ratio-mini -D

npm install postcss-write-svg -D

npm install postcss-loader -D

npm install postcss-flexbugs-fixes -D

一次性安装:

npm install autoprefixer postcss-px-to-viewport postcss-aspect-ratio-mini postcss-write-svg postcss-loader postcss-flexbugs-fixes -D

3 配置webpack

1. 新增一个配置js文件

随便叫什么名字,这里叫 globalOptions.js

配置以下内容:

const autoprefixer = require('autoprefixer')
const px2viewport = require('postcss-px-to-viewport')
const aspectRatio = require('postcss-aspect-ratio-mini')
const writeSvg = require('postcss-write-svg')

const postcssOptions = {
  loader: 'postcss-loader',
  options: {
    plugins: [
      require('postcss-flexbugs-fixes'),
      autoprefixer({
        browsers: [
          '>1%',
          'last 10 versions',
          'Firefox ESR',
          'Android 4.0',
          'ios 8',
          'Safari >= 6',
          'not ie < 9' // React doesn't support IE8 anyway
        ]
      }),
      px2viewport({
        viewportWidth: 750,
        viewportHeight: 1670,
        unitPrecision: 5,
        viewportUnit: 'vw',
        selectorBlackList: [],
        minPixelValue: 1,
        mediaQuery: false
      }),
      writeSvg({ utf8: false }),
      aspectRatio()
    ]
  }
}

module.exports = postcssOptions

2.webpack导入配置

webpack文件中新增css的loader,内容是刚刚配置的内容。

以下是基于create react app下的webpack配置修改示例:

  const postcssRegex = /\.(styl|css|less)$/;
  const postcssModuleRegex = /\.module\.(styl|css|less)$/;
  const postcssOptions = require('./globalOptions.js')
  const postcssLoader = getStyleLoaders({
    importLoaders: 1,
    sourceMap: isEnvProduction
      ? shouldUseSourceMap
      : isEnvDevelopment,
    modules: {
      getLocalIdent: getCSSModuleLocalIdent,
    },
  })
  postcssLoader.push(postcssOptions)

  return {
    module: {
      strictExportPresence: true,
      rules: [
        {
          oneOf: [
            {
              test: postcssRegex,
              exclude: postcssModuleRegex,
              use: postcssLoader,
              sideEffects: true,
            },
            {
              test: postcssModuleRegex,
              use: postcssLoader,
            },
          ],
        },
      ],
    },

注意:这两个test配置需要放在所有css loader之后,(即放在loader代码的最前面)按照loader执行顺序,越写在前的代码,越是最后加载。

            {
              test: postcssRegex,
              exclude: postcssModuleRegex,
              use: postcssLoader,
              sideEffects: true,
            },
            {
              test: postcssModuleRegex,
              use: postcssLoader,
            },

该配置不等同于样式loader,比如你引入了stylus,还需要配置stylus-loader。

之后,运行查看适配情况。

结束。