You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.5 KiB
JavaScript
48 lines
1.5 KiB
JavaScript
import autoprefixer from 'autoprefixer';
|
|
import postcssResponsiveType from 'postcss-responsive-type';
|
|
import pxToViewport from 'postcss-px-to-viewport';
|
|
// 使用新的PostCSS 8 API创建自定义的px-to-viewport插件
|
|
const customPxToViewportPlugin = (options) => {
|
|
return {
|
|
postcssPlugin: 'custom-px-to-viewport',
|
|
Once(root, { result }) {
|
|
const file = result.opts.from;
|
|
let viewportWidth = options.defaultViewportWidth || 375; // 设置默认值
|
|
|
|
if (file?.includes('vant')) {
|
|
viewportWidth = 375;
|
|
}else{
|
|
viewportWidth = 1920;
|
|
}
|
|
|
|
const pxToViewportInstance = pxToViewport({
|
|
...options,
|
|
viewportWidth: viewportWidth,
|
|
});
|
|
|
|
if (file) {
|
|
pxToViewportInstance(root, result);
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
// 定义postcss插件名称
|
|
customPxToViewportPlugin.postcss = true;
|
|
|
|
export default {
|
|
plugins: [
|
|
autoprefixer(), // 自动添加浏览器前缀
|
|
postcssResponsiveType(), // 自动调整文本大小
|
|
customPxToViewportPlugin({
|
|
defaultViewportWidth:1920,
|
|
unitPrecision: 5, // 保留的小数位数
|
|
selectorBlackList: [/^\.van/], // 以 .van 开头的类名不转换
|
|
minPixelValue: 1, // 小于或等于 1px 不转换
|
|
viewportUnit: "vmin", // 转换后的单位
|
|
fontViewportUnit: "vmin", // 字体单位
|
|
unitToConvert: "px" // 需要转换的单位
|
|
}),
|
|
],
|
|
};
|