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 全局样式 的相关文章

  • 如何通过aws-sdk(javascript或node)获取s3存储桶大小

    我尝试使用 javascript nodejs aws sdk 查找 获取 s3 存储桶信息 但没有找到这样的 api 如何通过 aws sdk javascript 或 node api 获取 s3 存储桶大小 信息 每天一次向 Clou
  • 动态表中每个按钮的 Jquery-Ui 对话框表单

    我正在生成一个 HTML 表 每行都有一个按钮 必须打开 Jquery ui 对话框表单 The table table class table table reporting table condensed table striped t
  • 如何为 HTML5 音频元素制作加载栏?

    我正在尝试为 HTML5 音频元素制作一个加载栏 显示加载 缓冲的百分比 对于视频标签 可以使用以下方法进行计算 video buffered end 0 video duration 但我无法让它与音频标签一起使用 它只是返回一个固定值
  • jquery ajax调用一个接一个循环而不停止页面渲染

    我有一个超过 100 行的表 每行包含 pdf 文件及其说明以及最后一列状态 状态显示 pdf 文件是否可读 一旦表格加载到浏览器中 我就会从表格的每一行获取每个文件名 并使用 ajax 调用对其进行处理 如果文件可读 我将该行的状态字段更
  • 在 JavaScript 中定位提示弹出窗口

    我有一个如下所示的 JavaScript 提示 我想将提示放在屏幕中心 如何使用 javascript 做到这一点 function showUpdate var x var name prompt Please enter your na
  • 离子旋转器未显示

    我用 http 请求填充 Ionic 集合重复列表 但我不想将所有内容直接加载到 DOM 中 因此 我只显示其中一些项目 并在您向下滚动时添加其余项目 为此我实现了无限滚动功能 当我到达页面底部时 它应该显示一个旋转器 但它没有 这些物品至
  • 如何使用 jQuery 通过 Ajax 发送复选框数组的值?

    我有一个包含很多表单字段的表单 12 x n 行 每行中的第一个字段 代表产品 是一个类似于以下内容的复选框
  • 如何将函数传递给 JavaScript Web Worker

    我想通过一个 或多个 函数传递postMessage 给网络工作者 因为我无法引用常规文件 为了启动 Web Worker 我将一个对象 URL 从 Blob 创建 传递给Worker构造函数 然后我传递一条消息 但到目前为止还没有在消息中
  • 如何检查元素的内容是否为空,如果是,则在 jquery 中删除该元素

    我目前正在尝试选择某个 div 内没有内容的任何 h2 元素并将其删除 这是我的 html 代码 div class skipToContainer h2 class vidSkipTo Hello h2 h2 class vidSkipT
  • 在 HTML5 中将两个图像合并到一个画布上

    我正在使用 HTML5 canvas 元素 假设我有 2 个 ImageData 对象 我想将它们组合起来放在一张画布上 假设我不关心这些图像如何组合 两个 ImageData 对象具有完全相同的像素数和形状 组合两个图像的最佳方式是什么
  • 删除 Laravel Mix 中的临时文件

    我想在 laravel mix 构建期间或之后删除临时构建文件 这是我目前拥有的一些代码 但是del不工作 const mix require laravel mix const del require del compile sass i
  • ReferenceError 和全局对象

    在浏览器中的 JavaScript 中window是全局对象 这意味着在全局范围内定义的每个变量都是window 那么为什么我会得到这个结果 console log window foo No error logs undefined co
  • PhantomJS 网页内存消耗?

    是否有一种编程方式 因为我想在运行时自动执行 方式来查看网页在通过 PhantomJs 运行时使用了多少内存 我也在使用 casperjs 如果这有帮助的话 我已经搜索了很多但没有找到任何方法 PhantomJs 使用 QtWebKit 因
  • 如何生成 JavaScript 堆栈跟踪? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 关于如何以跨浏览器的方式在 javascript 中生成堆栈跟踪有什么建议吗 较新的浏览器 Chrome 和 Firefox 公开了一个允
  • 如何修复 getImageData() 错误画布已被跨源数据污染?

    我的代码在本地主机上运行得很好 但在网站上却不起作用 我从控制台收到此错误 对于这一行 getImageData x y 1 1 data Uncaught SecurityError Failed to execute getImageD
  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content
  • Javascript:更改输入值时设置光标位置

    当您输入公式时 我试图在我的应用程序中重现类似于 Microsoft Excel Google Sheets 的用户体验 并且您可以使用不同的公式和变量来自动完成下拉菜单 为此 在验证自动完成功能后 我希望能够控制光标的位置 例如 如果我输
  • 数字和小数的输入掩码

    在测试我的程序后 我发现了以下错误 我在 sqlserver 中的表包含 价格数字 6 2 我的程序的用户输入价格 555 00 就很好了 但是当他输入 555555 时 这是错误的 所以我需要指定掩码 其中尾数是可选的 0 到 999 小
  • Angular 2访问组件内的ng-内容

    我怎样才能访问 content 来自组件类本身的组件 我想做这样的事情
  • 如何设置 Firebase 用户的显示名称?

    根据Firebase网站上的JS Auth文档 它只展示了如何获取 displayName 以及如何更新 displayName 所以我尝试更新它 但这有点不合逻辑 因为你怎么能在不创建某些东西的情况下更新它呢 所以我的问题是 如何设置注册

随机推荐

  • 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