vue全局less样式

1. 前提条件
   下载资源包：less-loader、less、style-resources-loader、vue-cli-plugin-style-resources-loader

npm i less-loader less --save-dev

npm i style-resources-loader vue-cli-plugin-style-resources-loader --save-dev

2. 定义变量

// globel.less 文件
@text-color: #f2f2f2;

3. 配置 vue.config.js
   注意全局样式文件路径

const path = require('path')
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        // 全局变量文件的路径
        path.resolve(__dirname, './src/assets/css/globel.less'),
      ],
    },
  },
})

4. 使用变量

// vue 组件
<style lang="less" scoped >
  a {
    border: 1px @text-color solid;
}
</style>

最后

以上就是单身大山为你收集整理的vue全局less样式的全部内容，希望文章能够帮你解决vue全局less样式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。