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。
之后,运行查看适配情况。
结束。
暂无评论