vue 配置less全局变量

Mtao&

已于 2023-07-06 09:14:42 修改

阅读量315

点赞数

分类专栏： vue 文章标签： vue.js less javascript

于 2023-05-15 13:55:02 首次发布

本文链接：https://blog.csdn.net/qq_45186619/article/details/130682884

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

安装并配置style-resources-loader和vue-cli-plugin-style-resources-loader插件，可以在Vue项目中实现全局less变量的导入，避免每个文件单独引入。在vue.config.js中设置preProcessor为less，指定less变量文件路径，这样可以提高开发效率。

摘要由CSDN通过智能技术生成

安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader

npm i style-resources-loader vue-cli-plugin-style-resources-loader -D

中途要是有什么报错可能版本导致的

这个我测试的版本号，可以正常使用

"devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "echarts": "^5.4.0",
    "less": "^4.1.3",
    "less-loader": "^7.3.0",
    "style-resources-loader": "^1.5.0",
    "vue-cli-plugin-style-resources-loader": "^0.1.5",
    "vue-template-compiler": "^2.6.14",
    "vue-wxlogin": "^1.0.4"
  },

vue.config.js

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  // publicPath: './', // 基本路径
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  outputDir: 'dist', // 输出文件目录
  lintOnSave: false, //关闭eslint
  runtimeCompiler: true,
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        // 全局less变量存储路径
        path.resolve(__dirname, './src/styles/var.less'),
      ]
    }
  }
}