在vue项目中css或者less的定义全局的变量方法

1.首页在css中写入base.css：

/* 
root选择器用匹配文档的根元素。
在HTML中根元素始终是HTML元素。
在根元素下自定义一些变量的样式 */
:root{
   border:1px solid blue;/* 设置样式 */
  --bg-color:red;/* 设置自定义的样式 */
  --font-size:30px;
  --height-min:100px;
}

2.在最外层的组件入口引入即可:

  @import './assets/css/base.css';
  .demoColor{
    background:var(--bg-color);/*此时的背景色就是base.css中定义的 */
    width:100px;
    height: 100px;
  }

3.页面元素：

 <div class="demoColor">
      demoColor
 </div>

最终的效果如图：

如果觉得有帮助留下你们的小爱心吧！