前言
尝试在
react
应用postcss-px-to-viewport
自适应布局,全网找遍了,基本上都要react-scripts eject
去批改webpack.config.js,
或者装一大堆依赖……,最初发现还不行。这里默认你曾经配置好
craco
,并且曾经存在craco.config.js
,react
脚手架默认的postcss
曾经是8.x
版本了,我这里装置了"postcss": "^7.0.36"
,8.x
版本能够看issues
,有人魔改了,npm
下面的postcss-px-to-viewport
和github
下面的版本不统一,能够装置他人打包好的postcss-px-to-viewport-with-include
,本文已7.x
为例。\
发现问题,肯定要去看 issues,说不定有奇效。
注释
craco.config.js
下的 style
引入 require('postcss-px-to-viewport-with-include')
并填写配置。
style: {
postcss: {
plugins: [require('tailwindcss'),
require('autoprefixer')(overrideBrowserslist=['last 20 versions', 'android >= 4.0', 'iOS >= 7']),
require('postcss-px-to-viewport-with-include')( {
unitToConvert: 'px', // 要转化的单位
viewportWidth: 375, // UI 设计稿的宽度
viewportHeight: 667, // UI
unitPrecision: 6, // 转换后的精度,即小数点位数
// propList: 当有些属性的单位咱们不心愿转换的时候,能够增加在数组前面,并在后面加上! 号,如 propList: ["*","!letter-spacing"], 这示意:所有 css 属性的属性的单位都进行转化,除了 letter-spacing 的
propList: ['*'], // 指定转换的 css 属性的单位,* 代表全副 css 属性的单位都进行转换
viewportUnit: 'vw', // 指定须要转换成的视窗单位,默认 vw
fontViewportUnit: 'vw', // 指定字体须要转换成的视窗单位,默认 vw
// 转换的黑名单,在黑名单外面的咱们能够写入字符串,只有类名蕴含有这个字符串,就不会被匹配。比方 selectorBlackList: ['wrap'], 它示意形如 wrap,my-wrap,wrapper 这样的类名的单位,都不会被转换
selectorBlackList: ['ignore'], // 指定不转换为视窗单位的类名,minPixelValue: 1, // 默认值 1,小于或等于 1px 则不进行转换
mediaQuery: true, // 是否在媒体查问的 css 代码中也进行转换,默认 false
replace: true, // 是否转换后间接更换属性值
exclude: [/node_modules/], // 设置疏忽文件,用正则做目录名匹配
// include: [/node_modules/],
landscape: false, // 是否解决横屏状况
}),
],
},
},
坑点
经测试,在 postcss.config.js
下退出配置有效,呜呜呜,这里测试良久,始终认为 exclude
的问题(也有可能是我 config 配置有问题,但这个配置在 vue 我的项目外面是没故障的,有懂得大佬,请指导,呜呜呜)。
2021-12-17 更:吃了不会看英文文档的亏,@craco/ 克拉科 – npm (npmjs.com),设置下mode: "file"
。
const path = require('path')
module.exports=({file})=>{
return {
plugins: {tailwindcss: {},
overrideBrowserslist: ['last 20 versions', 'android >= 4.0', 'iOS >= 7'],
'postcss-px-to-viewport-with-include': {
unitToConvert: 'px', // 要转化的单位
viewportWidth: 375, // UI 设计稿的宽度
viewportHeight: 667, // UI
unitPrecision: 6, // 转换后的精度,即小数点位数
// propList: 当有些属性的单位咱们不心愿转换的时候,能够增加在数组前面,并在后面加上! 号,如 propList: ["*","!letter-spacing"], 这示意:所有 css 属性的属性的单位都进行转化,除了 letter-spacing 的
propList: ['*'], // 指定转换的 css 属性的单位,* 代表全副 css 属性的单位都进行转换
viewportUnit: 'vw', // 指定须要转换成的视窗单位,默认 vw
fontViewportUnit: 'vw', // 指定字体须要转换成的视窗单位,默认 vw
// 转换的黑名单,在黑名单外面的咱们能够写入字符串,只有类名蕴含有这个字符串,就不会被匹配。比方 selectorBlackList: ['wrap'], 它示意形如 wrap,my-wrap,wrapper 这样的类名的单位,都不会被转换
selectorBlackList: ['ignore'], // 指定不转换为视窗单位的类名,minPixelValue: 1, // 默认值 1,小于或等于 1px 则不进行转换
mediaQuery: true, // 是否在媒体查问的 css 代码中也进行转换,默认 false
replace: true, // 是否转换后间接更换属性值
exclude: [/node_modules/], // 设置疏忽文件,用正则做目录名匹配
landscape: false, // 是否解决横屏状况
},
},
}
}
援用
首发于语雀文档 @is_tao
@craco/craco
postcss-px-to-viewport
postcss-px-to-viewport-with-include