postcss-rpx2vw
介绍
基于 postcss 实现的一个 css 单位转换插件(支持自定义单位),可以使用 rpx 作为单位书写。
示例:
/* 转换前 */
div {
width: 100rpx;
}
/* 转换后 */
div {
width: 50vw;
}
推荐使用的 node 版本和 npm 版本
{
"node": ">=14.x.x",
"npm": ">=6.x.x"
}
安装
$ npm i postcss-rpx2vw -D
使用教程
提示:使用前需要先安装 postcss 插件
// 默认参数
const defaultOptions = {
// 设计稿宽度
viewportWidth: 750,
// 转换后的视口单位
viewportUnit: 'vw',
// 转换后的字体视口单位
fontViewportUnit: 'vw',
// 单位精度
unitPrecision: 10,
};
在构建配置文件里使用
// vite
import { defineConfig } from 'vite';
import rpx2vw from 'postcss-rpx2vw';
export default defineConfig({
css: {
postcss: {
plugins: [rpx2vw()],
},
},
});
// webpack
// 需要下载对应依赖包,案例用css举例
module.exports = {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['postcss-rpx2vw'],
},
},
},
],
},
],
};