vue项目配置sass及引入外部scss文件方式
配置sass及引入外部scss文件
配置sass
安装对应依赖node模块
npm install node-sass --save-dev npm install sass-loader --save-dev
引入外部scss文件
在main.js中引入需要的scss文件
如果显示错误为如下图所示
打开webpack.base.config.js，删除掉注释部分的代码。因为vue-cli 项目里面配置了编译scss的，只要你装node-sass 和sass-loader，不需要自己添加配置。
记住此时需要重启项目 npm run dev
踩过的坑 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 2中实现截图功能,可以使用HTML5的Canvas元素和一些JavaScript代码来捕获屏幕或特定元素的截图,以下是一个简单的步骤和示例代码来实现这个功能,需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了vue2如何使用el-tag实现自定义菜单导航标签,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
这篇文章主要介绍了vue ajax 拦截原理与实现方法,结合实例形式分析了vue.js基于ajax拦截实现无刷新登录的相关原理与操作技巧,需要的朋友可以参考下2019-11-11
这篇文章主要介绍了Vue中$emit调用父组件异步方法模拟.then实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-09-09
这篇文章主要为大家详细介绍了vue实现横向斜切柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
埋点分析是网站分析的一种常用的数据采集方法,下面这篇文章主要给大家介绍了关于如何通过Vue自定义指令实现前端埋点的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
el-table多选toggleRowSelection不生效解决方案
这篇文章主要给大家介绍了关于el-table多选toggleRowSelection不生效的解决方案,文中通过图文以及代码将解决办法介绍的非常详细,需要的朋友可以参考下2023-08-08
vue cli3.0结合echarts3.0与地图的使用方法示例
这篇文章主要给大家介绍了关于vue cli3.0结合echarts3.0与地图的使用方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
这篇文章主要介绍了vue中父子组件传值,解决钩子函数mounted只运行一次的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了Vue验证码60秒倒计时功能简单实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
最新评论