Less

vue 项目中使用 less 配置主题颜色并全局引入

  1. 在vue项目中执行命令,安装插件
yarn add less less-loader style-resources-loader -D
  1. 安装完成后在 vue.config.js 中会自动添加一段配置代码
// 引入 path
const path = require("path");
module.exports = {
    pluginOptions:{
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                resolve('src/style/var.less')
            ]
        }
    }
}
  1. 配置完成后,定义全局样式变量
@theme_color: red;
  1. 直接使用即可
p {
    color: @theme_color;
}
  1. 定义选择器属性
// 定义全局选择器
@title:{
  font-size: 20px;
  color: rgba(28, 141, 246, 1);
}
// 使用全局选择器
h1 {
    @title()
}