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

目录

• 配置sass及引入外部scss文件
  • 配置sass
  • 引入外部scss文件
  • 如果显示错误为如下图所示
  • 记住此时需要重启项目 npm run dev
• 踩过的坑 Vue引入Sass文件
  • 问题来了，为什么呢？

配置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文档解析不正确。