vue項(xiàng)目怎么配置sass及引入外部scss文件

這篇文章主要介紹了vue項(xiàng)目怎么配置sass及引入外部scss文件的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue項(xiàng)目怎么配置sass及引入外部scss文件文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

配置sass及引入外部scss文件

配置sass

安裝對(duì)應(yīng)依賴(lài)node模塊

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

引入外部scss文件

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

如果顯示錯(cuò)誤為如下圖所示

打開(kāi)webpack.base.config.js，刪除掉注釋部分的代碼。因?yàn)関ue-cli 項(xiàng)目里面配置了編譯scss的，只要你裝node-sass 和sass-loader，不需要自己添加配置。

記住此時(shí)需要重啟項(xiàng)目 npm run dev

踩過(guò)的坑 Vue引入Sass文件

問(wèn)題：在使用vue cli 3.0開(kāi)發(fā)自己網(wǎng)頁(yè)的過(guò)程中，想把CSS樣式單獨(dú)抽離出來(lái)，因?yàn)镾ass的嵌套寫(xiě)法顯得層次十分清晰，所以我個(gè)人是十分喜歡的。

但是在CSS樣式單獨(dú)抽離形成文件之后再引入，發(fā)現(xiàn)只有第一層樣式作用上了。

問(wèn)題來(lái)了，為什么呢？

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文件中直接寫(xiě)Sass樣式，結(jié)果是可以作用上的，但是為什么單獨(dú)抽離出來(lái)沒(méi)作用？

然后再把命令運(yùn)行一次

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

vue cli 3.0 之后就沒(méi)有config.js、build等文件或文件夾，所以不用配置，直接使用就可以了。

命令運(yùn)行完之后還是不行。

于是開(kāi)始百度，隱隱約約感覺(jué)到問(wèn)題出現(xiàn)在引入的時(shí)候，而不是解析的時(shí)候。

百度 @import url("./xxx.sass") 和 @import “./xxx.sass” 的區(qū)別

得到官方答案

Sass支持原生的CSS@import，sass會(huì)嘗試找到對(duì)應(yīng)的sass文件并導(dǎo)入進(jìn)來(lái)，但在下列三種情況下會(huì)生成原生的CSS@import：

• 被導(dǎo)入文件的名字以.css結(jié)尾

• 被導(dǎo)入文件的名字是一個(gè)URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字體API提供的相應(yīng)服務(wù)；

• 被導(dǎo)入文件的名字是CSS的url()值。

這就是說(shuō)，你不能用sass的@import直接導(dǎo)入一個(gè)原始的css文件，因?yàn)閟ass會(huì)認(rèn)為你想用css原生的@import。但是，因?yàn)閟ass的語(yǔ)法完全兼容css，所以你可以把原始的css文件改名為.scss后綴，即可直接導(dǎo)入了。

所以造成一開(kāi)始Sass文檔解析不正確。

關(guān)于“vue項(xiàng)目怎么配置sass及引入外部scss文件”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue項(xiàng)目怎么配置sass及引入外部scss文件”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。