一、使用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"),
      ],
    },
  },
  
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐