最近在使用Vue Cli開(kāi)發(fā)項(xiàng)目，但是在配置scss的時(shí)候遇到了報(bào)錯(cuò)的情況。通過(guò)查找資料和不斷嘗試，終于解決了這個(gè)問(wèn)題。以下是我遇到的問(wèn)題以及解決方案。

首先，我遇到的報(bào)錯(cuò)信息是：“Module build failed: SassError: Invalid CSS after…”。這個(gè)錯(cuò)誤信息讓我很苦惱，因?yàn)槲也⒉恢朗悄睦锍隽藛?wèn)題。經(jīng)過(guò)查閱資料以及百度，我發(fā)現(xiàn)這個(gè)錯(cuò)誤原因可能是我沒(méi)有正確安裝相關(guān)scss的依賴。

{
// 安裝依賴命令
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"node-sass": "^4.14.1"
}

于是我通過(guò)npm安裝了sass、sass-loader和node-sass三個(gè)依賴，然后重新運(yùn)行項(xiàng)目，但是還是出現(xiàn)了同樣的報(bào)錯(cuò)信息。

接下來(lái)我想到可能是我的scss文件本身有問(wèn)題。于是我將scss文件中的代碼全部注釋掉，只保留一個(gè)樣式，發(fā)現(xiàn)還是報(bào)錯(cuò)。這個(gè)問(wèn)題讓我很疑惑。經(jīng)過(guò)對(duì)比和實(shí)驗(yàn)，我發(fā)現(xiàn)是scss文件路徑寫錯(cuò)了。因?yàn)槲业奈募A命名為“style”，所以我在webpack.base.conf.js中的resolve.alias中寫的是“@style”，但是我在引入scss文件的時(shí)候?qū)懗闪恕癅styles”，所以webpack找不到scs文件，就報(bào)錯(cuò)了。

resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
'@style': resolve('src/style'),
}
}

修改了路徑之后，scss文件可以正常引入了。

另外，在webpack.base.conf.js文件中，需要添加如下代碼：

{
test: /.scss$/,
loader: 'sass-loader',
options: {
includePaths: [
path.resolve(__dirname, './src/style')
]
}
}

這段代碼的作用是設(shè)置scss文件在引用時(shí)的查找路徑，從而可以找到scss文件所在的文件夾。

總結(jié)一下，scss報(bào)錯(cuò)的原因可能有很多，但是一般是由于相關(guān)依賴沒(méi)有正確安裝或者scss文件路徑錯(cuò)誤所導(dǎo)致的。在解決問(wèn)題的時(shí)候，我們可以先確定依賴是否正確安裝，然后仔細(xì)檢查scss文件是否存在錯(cuò)誤以及路徑是否正確。

希望這篇文章對(duì)大家在開(kāi)發(fā)中遇到scss報(bào)錯(cuò)問(wèn)題有所幫助。