vue cli scss 报错

笔记2024-02-125 人已阅来源:网络

最近在使用Vue Cli开发项目,但是在配置scss的时候遇到了报错的情况。通过查找资料和不断尝试,终于解决了这个问题。以下是我遇到的问题以及解决方案。

首先,我遇到的报错信息是:“Module build failed:
SassError: Invalid CSS after…”。这个错误信息让我很苦恼,因为我并不知道是哪里出了问题。经过查阅资料以及百度,我发现这个错误原因可能是我没有正确安装相关scss的依赖。

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

于是我通过npm安装了sass、sass-loader和node-sass三个依赖,然后重新运行项目,但是还是出现了同样的报错信息。

接下来我想到可能是我的scss文件本身有问题。于是我将scss文件中的代码全部注释掉,只保留一个样式,发现还是报错。这个问题让我很疑惑。经过对比和实验,我发现是scss文件路径写错了。因为我的文件夹命名为“style”,所以我在webpack.base.conf.js中的resolve.alias中写的是“@style”,但是我在引入scss文件的时候写成了“@styles”,所以webpack找不到scs文件,就报错了。

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')
]
}
}

这段代码的作用是设置scss文件在引用时的查找路径,从而可以找到scss文件所在的文件夹。

总结一下,scss报错的原因可能有很多,但是一般是由于相关依赖没有正确安装或者scss文件路径错误所导致的。在解决问题的时候,我们可以先确定依赖是否正确安装,然后仔细检查scss文件是否存在错误以及路径是否正确。

希望这篇文章对大家在开发中遇到scss报错问题有所帮助。