在Vue项目中引入错及解决方法·sass·在Vue中引入SCSS时可能会遇到报错的情况

作者：网络发烧程序猿 | 发布时间：2025-07-09 |

在Vue项目中引入SCSS常见报错及解决方法

一、缺少必要的依赖包

在使用SCSS时，如果你的项目报错，可能是没装对依赖包。你需要安装node-sass和sass-loader。怎么装呢？先打开终端，找到你的项目根目录，然后执行：

  1. 对于npm用户，输入：`npm install node-sass sass-loader --save-dev`
  2. 对于yarn用户，输入：`yarn add node-sass sass-loader --dev`

安装完之后，可以检查`package.json`文件看看依赖包是否已经正确安装了。

二、配置文件设置不正确

如果你用的是Vue CLI 3或以上版本，通常不需要额外配置。但如果你用的是Vue CLI 2或更老版本，需要在`vue.config.js`文件里加一些配置。比如这样：

module.exports = { css: { loaderOptions: { sass: { implementation: require('sass'), }, }, }, };

Vue CLI 3及以上版本，你只需要在`vue.config.js`中直接使用`