解决vue@cli 5版本使用postcss-px-to-viewport适配vant问题

在postcss.config.js配置一直报错, 换到vue.config.js里进行配置,代码如下:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: loaderContext => {
          return {
            plugins: [
              ['autoprefixer'],
              {
                'postcss-px-to-viewport': {
                  // vant设计图以375为基准,实际项目常规是750,按设计图配置
                  viewportWidth: loaderContext.resourcePath.includes('vant')
                    ? 375
                    : 750
                }
              }
            ]
          }
        }
      }
    }
  }
})

搞了很久,希望对你们有帮助ε=(´ο`*)))唉,版本问题真烦!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
针对 vue@cli 5 版本使用 postcss-px-to-viewport element-viewport 和 postcss-viewport-units 插件: ``` npm install postcss-px-to-viewport postcss-viewport-units --save-dev ``` 2. 在项目根目录下创建 postcss.config.js 文件,并添加以下代码: ``` module.exports = { plugins: { 'postcss-px-to-viewport': { viewportWidth: 375, // 视窗的宽度,对应设计稿的宽度 unitPrecision: 3, // 指定 `px` 转换为视窗单位值的小数位数 viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用 vw selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类 minPixelValue: 1, // 小于或等于 `1px` 不转换为视窗单位,你也可以设置为想要的值 mediaQuery: false // 允许在媒体查询中转换 `px` }, 'postcss-viewport-units': {} } } ``` 3. 修改 vue.config.js 文件,添加以下代码: ``` const path = require('path') module.exports = { css: { loaderOptions: { postcss: { plugins: [ require('postcss-px-to-viewport')({ viewportWidth: 375, unitPrecision: 3, viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines'], minPixelValue: 1, mediaQuery: false }), require('postcss-viewport-units')({}) ] } } }, chainWebpack: config => { const svgRule = config.module.rule('svg') svgRule.uses.clear() svgRule.use('vue-svg-loader').loader('vue-svg-loader') }, configureWebpack: { resolve: { alias: { '@': path.resolve(__dirname, './src') } } } } ``` 4. 修改 main.js 文件,引入 element-ui 的样式文件,并且添加以下代码: ``` import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' // 在使用 ElementUI 前,将 px 转换成 vw import 'lib-flexible/flexible.js' Vue.use(ElementUI) ``` 这样就可以使用 postcss-px-to-viewport 插件 element-ui 了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值