一个移动端的h5页面使用less

原创已于 2022-12-06 17:32:37 修改 · 478 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#less #javascript #vue.js

于 2022-12-05 15:01:21 首次发布

Vue组件专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在Vite项目中配置PostCSS插件postcss-pxtorem实现px到rem单位转换，并展示了less变量的全局配置方法。

首先安装
postcss-pxtorem
postcss.config.js 配置

module.exports = {
  plugins: {
    // autoprefixer: {},
    // flexible配置
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75
      },
      propList: ['*'] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
    }
  }
}

下载less
vite.config.js中配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          globalVars: {
            '@active_color': '#1CCCBE',
            '@border_color': '#F5F5F5',
            '@time_color': '#999',
            '@title_color': '#333',
            '@background_color': '#1CCCBE'
          },
          modifyVars: {
            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "./src/assets/css/vant.less";`,
          }
        }
      }
    }
  },
})