vue項目怎么配置sass及引入外部scss文件

這篇文章主要介紹了vue項目怎么配置sass及引入外部scss文件的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇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項目怎么配置sass及引入外部scss文件”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue項目怎么配置sass及引入外部scss文件”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。