vue项目配置sass及引入外部scss文件


Posted in Vue.js onApril 14, 2022

配置sass及引入外部scss文件

配置sass

安装对应依赖node模块

npm install node-sass --save-dev
npm install sass-loader --save-dev

引入外部scss文件

在main.js中引入需要的scss文件

vue项目配置sass及引入外部scss文件

如果显示错误为如下图所示

vue项目配置sass及引入外部scss文件

打开webpack.base.config.js,删除掉注释部分的代码。因为vue-cli 项目里面配置了编译scss的,只要你装node-sass 和sass-loader,不需要自己添加配置。

记住此时需要重启项目 npm run dev

vue项目配置sass及引入外部scss文件

踩过的坑 Vue引入Sass文件

问题:在使用vue cli 3.0开发自己网页的过程中,想把CSS样式单独抽离出来,因为Sass的嵌套写法显得层次十分清晰,所以我个人是十分喜欢的。

但是在CSS样式单独抽离形成文件之后再引入,发现只有第一层样式作用上了。

问题来了,为什么呢?

CSS
.section{
	/*  只有这层作用上了 */
	width: 500px;
	height: 500px;
	background-color: #409EFF;
	
	.header{ 
		width: 500px;
		height: 100px;
		background-color:#67C23A
	}
	
	.main{
		width: 500px;
		height: 300px;
		background-color:#E6A23C;
	}
	
	.footer{
		width: 500px;
		height: 100px;
		background-color:#F56C6C;
	} 
}

首先我尝试了在vue文件中直接写Sass样式,结果是可以作用上的,但是为什么单独抽离出来没作用?

然后再把命令运行一次

npm install --save-dev node-sass sass-loader style-loader

vue cli 3.0 之后就没有config.js、build等文件或文件夹,所以不用配置,直接使用就可以了。

命令运行完之后还是不行。

于是开始百度,隐隐约约感觉到问题出现在引入的时候,而不是解析的时候。

百度 @import url("./xxx.sass") 和 @import “./xxx.sass” 的区别

得到官方答案

Sass支持原生的CSS@import,sass会尝试找到对应的sass文件并导入进来,但在下列三种情况下会生成原生的CSS@import:

  • 被导入文件的名字以.css结尾
  • 被导入文件的名字是一个URL地址(比如http://www.sass.hk/css/css.css),由此可用谷歌字体API提供的相应服务;
  • 被导入文件的名字是CSS的url()值。

这就是说,你不能用sass的@import直接导入一个原始的css文件,因为sass会认为你想用css原生的@import。但是,因为sass的语法完全兼容css,所以你可以把原始的css文件改名为.scss后缀,即可直接导入了。

所以造成一开始Sass文档解析不正确。

Vue.js 相关文章推荐
浅析VUE防抖与节流
Nov 24 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 #Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 #Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 #Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 #Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 #Vue.js
vue elementUI表格控制对应列
Apr 13 #Vue.js
vue项目打包后路由错误的解决方法
Apr 13 #Vue.js
You might like
php获得文件扩展名三法
2006/11/25 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
常用参考资料(手册)下载或者链接
2006/07/22 Javascript
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
javascript 树控件 比较好用
2009/06/11 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
浅析JavaScript异步代码优化
2019/03/18 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
python使用win32com库播放mp3文件的方法
2015/05/30 Python
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
Python换行与不换行的输出实例
2020/02/19 Python
水果花束:Fruit Bouquets
2017/12/20 全球购物
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
高职助产应届生自荐信
2013/09/24 职场文书
培训主管的岗位职责
2013/11/23 职场文书
捐书寄语赠言
2014/01/18 职场文书
幼儿园保教管理制度
2014/02/03 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
婚前保证书
2014/04/29 职场文书
2014年图书室工作总结
2014/12/09 职场文书
奖学金个人总结
2015/03/04 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书