当前位置:首页 > 前端技术 > vue项目 在style标签中引入css,less,sass的方法

vue项目 在style标签中引入css,less,sass的方法

2022年11月08日 10:40:02前端技术12

vue项目 style标签引入 less sass

less和sass需要安装相应的依赖
package.json 中加上 并再次npm install 重启项目

"less": "^3.12.2",
"less-loader": "^7.0.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",

也可以根据对用的命令 后面带有版本的命令下载依赖

在我们编写vue代码时,有时候需要写入大量的css样式,会有一些不方便的情况
1.有时候定义变量可能会和class名称重复,根据字符查找变量时会查出多个,不便于查找
2.css会占用大量的行数 页面的dom和js代码并不是很多 整个页面却有几千行甚至上万

我们可以将css代码单独放在静态目录下存放,在style标签中引入
vue项目 在style标签中引入css,less,sass的方法 _ JavaClub全栈架构师技术笔记根据项目所用语言定义文件后缀, .css .less .scss 这里定义的是less后缀

vue项目 在style标签中引入css,less,sass的方法 _ JavaClub全栈架构师技术笔记在需要的目录下 style标签下进行引入
可以根据层级和@根目录进行引入
用@根目录的方法编译器会报错 页面上可以看css也确实生效了
注意 引入要根据文件后缀进行引入
比如 后缀为.less的样式文件style标签 的lang=""属性也要对应的修改

<style lang="less" scoped>
/**引入的首页的样式css | less*/
@import "../assets/css/Tax.less";

@import "@/assets/css/Tax.less";
</style>

如果是scss后缀的文件要修改为(因为是另外的项目 所以路径会不一样)

<style lang="scss" scoped>
	/**引入的首页的样式css | scss*/
	@import '@/static/css/index.scss';
	/**引入的底部导航样式css | scss*/
	@import '@/static/css/bottomView.scss';
</style>

作者:海上楼月镜中花〃
来源链接:https://blog.csdn.net/weixin_42700654/article/details/123236408

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/68456.html

标签: css标签vue
分享给朋友:

“vue项目 在style标签中引入css,less,sass的方法” 的相关文章

Markdown中使用html标签

有时候,我们会在笔记中使用一些HTML标签,但是Markdown中直接使用html标签会被解析为格式.该怎么书写,可以直接显示为html的标签呢. <h1>这是一个标题</h1> //其中的<h1&g...

学习Vue的一些看法

对于vuejs的学习我大概分三个层次: 第一层:了解概念,理解原理,不求甚解即可。 大到nodejs/webpack,搞清楚作用,运作流程;小到vuex/vue-router作用,预期目标。搞清楚这些原理,你基本就告别了盲人摸象的层次,就算遇...

HTML之框架结构标签的简单使用

框架标签的简单使用 框架: 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面,简而言之,就是在一个窗口中显示多个页面。 每个页面称之为一个框架。并且每个框架独立于其他的框架。 使用...

HTML中的Style标签media属性控制打印内容样式

最近项目用到Web页面打印报表的功能,因为我们的项目采用的是HTML的Table方式实现的表格,所以符合javascript中的window.print,了解了下window.print()函数的使用方式。 window.print():用来打印window.documen...

HTML-列表标签list与表格标签table

HTML-列表标签list与表格标签table

目录   列表标签 表格标签 列表标签      <ul>无序列表             ...

HTML5 video 视频标签使用介绍

HTML <video> 适用于HTML 5+,用于定义在线观看的视频流媒体。 <video width="320" height="240" src="movie.ogg" controls="controls"> 这里是注释文字,如果无法...

标签添加不可用属性

1. 简单设置a标签的disabled属性就可以阻止事件(onclick)还有href吗? 锚标签本身不支持disabled,所以简单设置了disabled属性是没有任何效果的 2. 如何阻止href? 首先看一下 关于a标签的oncli...

HTML Label标签使用

HTML Label标签使用

转载 from :https://blog.csdn.net/gnail_oug/article/details/72852150 label标签介绍 label标签为input元素定义标注(标记),它不会向用户呈现任何特殊效果,和span标签类似。但label标签和...

html语义化标签

html语义化标签

很多面试官会问:谈谈你对 HTML5语义化标签的理解。那么本篇博客专门解答一下这个问题。   什么是语义元素? 语义是指对一个词或者句子含义的正确解释。很多html标签也具有语义的意义,也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如,当浏...

前端编程之路一一HTML的常用标签大全

前端编程之路一一HTML的常用标签大全

html常用标签 html文档结构 1 <!DOCTYPE html> 2 <html lang="zh-CN"> #这个lang表示语言,zh-CN中文的意思,整个文档的内容以中文为主,如果以英文为主,就写成la...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。