vue-cli3.0 配置使用 less 全局样式

2023-10-29

在css样式文件夹中新增 global.less 作为全局样式,在 main.js 中通过 import 导入,可正常使用样式,但 global.less 中定义的样式属性还不能全局使用,需通过以下方法配置。

1、安装 style-resources-loader 和 vue-cli-plugin-style-resources-loader 两个插件

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

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

使用 global.less

const path = require('path')
module.exports = {
  devServer: {
    open: true
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './src/assets/css/global.less')
      ]
    }
  }
}

或者使用 global.scss


```javascript
module.exports = {
	css: {
		loaderOptions: {
			sass: {
				data: `@import '@/assets/css/global.scss';`
			}
		}
	}
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue-cli3.0 配置使用 less 全局样式 的相关文章

随机推荐

  • numpy 中常用的数据保存、fmt多个参数

    在经常性读取大量的数值文件时 比如深度学习训练数据 可以考虑现将数据存储为Numpy格式 然后直接使用Numpy去读取 速度相比为转化前快很多 一 保存为二进制文件 npy npz 1 numpy save file arr allow p
  • 史上最全的KVM虚拟化部署(一)

    目录 1 kvm简介 首先 查看cpu是否支持虚拟化 2 kvm安装过程 a 防火墙优化 b 安装kvm组件 c 开启libvirtd服务 d 设置KVM网络为桥接 3 kvm管理 上传系统iso镜像到宿主机里 4 后半部分可以参考我的其他
  • 求职面试之项目经验介绍总结

    项目经验介绍 一定要突出 经验 二字 自己在工作 发现问题 并解决问题的过程 显得尤为珍贵 一般面试官会问到这个项目的整体架构如何 模块之间如何交互 遇到的最大难题是什么 如何解决 哪些问题是你发现并解决的 面试官通过这些问题 就可以考察求
  • Mathematica应用实例——输出二项分布的概率密度函数图(PDF of Binomial Distribution)

    在Excel中绘制二项分布的概率密度函数图 需要先使用公式制作数据集 然后基于数据集进行绘图 在Mathematica中 仅需一行命令即可 两者所需时间不是一个数量级 Mathematica代码 ListPlot Table k PDF B
  • 详解https是如何确保安全的?

    Https 介绍 1什么是Https HTTPS 全称 Hypertext Transfer Protocol over Secure Socket Layer 是以安全为目标的HTTP通道 简单讲是HTTP的安全版 即HTTP下加入SSL
  • leetcode 974. 和可被 K 整除的子数组

    给定一个整数数组 A 返回其中元素之和可被 K 整除的 连续 非空 子数组的数目 示例 输入 A 4 5 0 2 3 1 K 5 输出 7 解释 有 7 个子数组满足其元素之和可被 K 5 整除 4 5 0 2 3 1 5 5 0 5 0
  • 【3】Midjourney基本指令

    将自己的图片上传 AI训练 点击输入框的 号 会有上传文件 双击就可以选择图像上传 回车 图片上按右键 选复制链接 直接贴到输入框imagine prompt 后面 贴完后 先空一格 重要 再输入文本 可逗号分段 及参数 垫图不限只用1张图
  • FatFs文件系统配置多线程安全

    文件系统 FatFs 是用于小型嵌入式系统的通用 FAT exFAT 文件系统模块 FatFs 模块的编写符合 ANSI C C89 并与磁盘 I O 层完全分离 因此它独立于硬件平台 它可以集成到资源有限的小型微控制器中 例如 8051
  • 将cmd中的命令输出保存为txt文本文件

    在使用Windows XP中的cmd exe工具时 有时候我们想要把我们的输入命令及结果保存起来 我们可将命令运行的结果输出到文本文件 在你输入的命令后再加上 gt 和你想保存的文件地址和名字就可以了 例如 将Ping命令的运行结果输出到D
  • iOS开发系列--视图切换

    2014 08 28 08 27 by KenshinCui 105420 阅读 64 评论 收藏 编辑 概述 在iOS开发中视图的切换是很频繁的 独立的视图应用在实际开发过程中并不常见 除非你的应用足够简单 在iOS开发中常用的视图切换有
  • 集成灶排名十大品牌之一的火星人坚持科技创新,打破行业同质化“窘况”

    造型 千篇一律 油烟四窜 功能单一 是长期以来传统油烟机留给人们最直观的感觉 随着集成灶时代的来临 集造型时尚 吸油烟率出色 功能强大等优势于一身的集成灶被更多家庭选择 但是纵观近几年的集成灶十大排名榜 却也不难发现 市场中集成灶产品也出现
  • 泛型父类需要获取其子类定义的泛型类型即class对象方法

    获取泛型T的class对象 方法一 TypeToken 方法二 java lang reflect ParameterizedType Type demo 结果 方法一 TypeToken TypeToken 是google提供的一个解析J
  • vue:antV G2在vue中的使用(阿里图表,类似echarts)

    效果比echarts好看 官方文档 https g2 antv vision zh docs manual getting started 转载来源 https www jianshu com p a836ae8aeeb7 一 安装 npm
  • vue中将 后台返回的0,1等 代码转换成 男,女等汉字。

    vue中将 后台返回的0 1等 代码转换成 男 女等汉字 一 table表格中 只有一项或者两项时候 在table项 中 可以使用多项的方法 也可以使用 作用域插槽使用 二 table表格外部 的方法 多项的时候 例如 01 02 03 0
  • 层级型结构图

    WBS 工作分解结构 用来显示如何把项目可交付成果分解为工作包 有助于明确高层级的职责 OBS 组织分解结构 按照组织现有的部门 单元或团队排列 并在每个部门下列出项目活动或工作包 运营部门 信息技术或采购部 只需要找到其所在的OBS位置
  • R语言实战笔记--第十四章 主成分和因子分析

    R语言实战笔记 第十四章 主成分和因子分析 标签 空格分隔 R语言 主成分分析 因子分析 原理及区别 主成分分析与因子分析很接近 其目的均是为了降维 以更简洁的数据去解释结果 但这两种方法其实是相差甚远 有幸找到一篇博文描述了这两者的不同
  • 转1:Python字符编码详解

    Python27字符编码详解 声明 一 字符编码基础 1 抽象字符清单ACR 2 已编码字符集CCS 3 字符编码格式CEF 31 ASCII初创 311 ASCII 312 EASCII 32 MBCSDBCSANSI本地化 321 GB
  • Android Studio导入工程报错[Plugin with id 'com.android.application' not found]

    http blog csdn net seafishyls article details 53572939 版权声明 本文为博主原创文章 未经博主允许不得转载 目录 出错现象 原因分析 buildgradleProject xxxx bu
  • 【解决】android设备有root权限,执行“adb disable-verity”命令报错“verity cannot be disabled/enabled - USER build”

    这个错误提示意味着你的设备是使用USER版本的固件构建的 这个版本不允许禁用verity功能 但是 你可以尝试以下步骤来解决问题 确认你的设备是否已经root 可以通过执行 adb root 命令来检查 确认你的设备是否已经启用了开发者选项
  • vue-cli3.0 配置使用 less 全局样式

    在css样式文件夹中新增 global less 作为全局样式 在 main js 中通过 import 导入 可正常使用样式 但 global less 中定义的样式属性还不能全局使用 需通过以下方法配置 1 安装 style resou