在vue项目中使用less全局变量

一、使用less使用less，需要安装开发依赖：$ npm install lessless-loader --sav-dev在项目中使用less：二、less全局变量在全局less文件中定义全局变量：在其他地方引用less全局变量:此时全局变量并未生效，需要安装开发依赖：$ npm install style-resources-loader vue-cli-plugin-style-resou

小志哥斯拉

15696人浏览 · 2022-03-23 15:21:20

小志哥斯拉 · 2022-03-23 15:21:20 发布

一、使用less

使用less，需要安装开发依赖：$ npm install less less-loader --save-dev

在项目中使用less：

二、less全局变量

在全局less文件中定义全局变量：

在其他地方引用less全局变量:

此时全局变量并未生效，需要安装开发依赖：$ npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev

并在vue.config.js文件中配置，指定全局变量文件：

const path = require('path')

module.exports = {
  
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [
        // 全局变量路径
        path.resolve(__dirname, "./src/assets/css/global.less"),
      ],
    },
  },
  
}