目录配置sass及引入外部sCSS文件配置sass引入外部scss文件如果显示错误为如下图所示记住此时需要重启项目 npm run dev踩过的坑 Vue引入Sass文件问题来了,为
安装对应依赖node模块
npm install node-sass --save-dev
npm install sass-loader --save-dev
在main.js中引入需要的scss文件
打开webpack.base.config.js,删除掉注释部分的代码。因为vue-cli 项目里面配置了编译scss的,只要你装node-sass 和sass-loader,不需要自己添加配置。
问题:在使用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:
这就是说,你不能用sass的@import直接导入一个原始的css文件,因为sass会认为你想用css原生的@import。但是,因为sass的语法完全兼容css,所以你可以把原始的css文件改名为.scss后缀,即可直接导入了。
所以造成一开始Sass文档解析不正确。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue项目配置sass及引入外部scss文件方式
本文链接: https://www.lsjlt.com/news/145988.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0