vue项目 在style标签中引入css,less,sass的方法
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标签中引入
根据项目所用语言定义文件后缀, .css .less .scss 这里定义的是less后缀
在需要的目录下 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），我们将第一时间核实后及时予以删除。
