博客

1. 项目内安装插件 style-resources-loader和vue-cli-plugin-style-resources-loader

命令:

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

yarn add style-resources-loader vue-cli-plugin-style-resources-loader -D

2. 配置vue.config.js

const { defineConfig } = require('@vue/cli-service')
const path = require('path')

module.exports = defineConfig({
  transpileDependencies: true,
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, './src/assets/common.less')]
    }
  }
})

3. 在vue项目的src/assets目录下创建common.less，并进行样式变量及全局样式的编写

(1)创建常用变量

/*** 公共颜色 ***/
@primary: #01C250; // 主题色
@blue: #4466AD; // 蓝色
@red: #F56C6C; // 红色
@orange: #E6A23C; // 橙色
@gray: #909399; // 灰色
@gray-light: #ececec; // 深灰色
@gray-light2: #fafafa; // 浅灰色
@dark: #000; // 深色/黑色
@disabled: #c0c4cc; // 禁用色
@text: #303133; // 文字颜色
@border: #E4E7ED; // 边框颜色
@bg-gray:#f6f6f6;    //灰色背景底色、页面背景

/*** 边距 ***/
@1x: 8px;
@x: @1x / 2; // 4px
@2x: 2 * @1x;
@3x: 3 * @1x;
@4x: 4 * @1x;

(2)创建常用样式

// 主题背景色
.bg-primary {
  background: @primary !important;
  color: white;
  font-weight: 400;
}
//table-header-背景色
.bg-gray {
  background: #f9f9f9 !important;
  font-weight: 400;
}
//白色背景
.bg-white {
  background: #fff !important;
}

// 文本颜色
.text {
  color: @text;
}
//主题色
.primary {
  color: @primary;
}
// 蓝色
.blue {
  color: @blue;
}
// 红色
.red {
  color: @red;
}
// 橙色
.orange {
  color: @orange;
}
// 灰色
.gray {
  color: @gray;
}
// 深色
.dark {
  color: @dark;
}
// 禁用色
.disabled {
  color: @disabled;
}
// 白色
.white {
  color: white;
}

4. 在main.js中引入common.less

5. 在.vue文件使用公共样式（无需引入，直接用）