vue+less+style-resources-loader 配置全局颜色变量

全局统一样式后,可配置vue.config.js实现全局颜色变量,方便在编写时使用统一风格的色彩

一、新建global.less

在这里插入图片描述

二、下载安装style-resources-loader

npm i style-resources-loader --save-dev

三、在vue.config.js中进行配置

module.exports = {
   
	 pluginOptions: {
   
	    'style-resources-loader': {
   
	      preProcessor: 'less',
	      patterns: [resolve('src/assets/css/global.less')]
	    }
	  },
}

四、在vue文件中使用

<style lang="less">
.test{
   
    color:@theme-color;
}
</style>

相关推荐

  1. webpack配置scss loader

    2023-12-07 02:54:04       62 阅读
  2. webpack里面loader配置

    2023-12-07 02:54:04       32 阅读
  3. Thymeleaf 全局变量

    2023-12-07 02:54:04       36 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-07 02:54:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-07 02:54:04       100 阅读
  3. 在Django里面运行非项目文件

    2023-12-07 02:54:04       82 阅读
  4. Python语言-面向对象

    2023-12-07 02:54:04       91 阅读

热门阅读

  1. 大数据基础设施搭建 - Maxwell

    2023-12-07 02:54:04       41 阅读
  2. DAPP开发【11】IPFS星际文件管理系统

    2023-12-07 02:54:04       51 阅读
  3. Topic和Partition

    2023-12-07 02:54:04       58 阅读
  4. FFmpeg视频缩略图与图像转换接口分析

    2023-12-07 02:54:04       51 阅读
  5. 重叠AMR的应用及编程实现

    2023-12-07 02:54:04       52 阅读
  6. MySQL - 索引类型详解

    2023-12-07 02:54:04       57 阅读
  7. 前端新趋势?有了Web Component,还在纠结vue或react

    2023-12-07 02:54:04       52 阅读
  8. Django大回顾 - 8 中间件、csrf认证相关

    2023-12-07 02:54:04       46 阅读