vue安装使用scss报错：Failed to resolve loader: sass-loader You may need to install it.

报错

Failed to resolve loader: sass-loader You may need to install it.

ERROR in ./src/views/login/index.vue 5:0-77

Module not found: Error: Can't resolve 'sass-loader' in 'C:\Users\xuhui\Desktop\web\thgj-device-monitoring-web'

@ ./src/router/index.js 3:0-45 10:13-18

@ ./src/main.js 4:0-30 9:19-25

webpack compiled with 1 error

解决方法

这个错误提示表明项目缺少 sass-loader，这是一个用于处理 SASS/SCSS 文件的 Webpack 加载器。需要安装 sass-loader 以及相关的依赖项来解决这个问题。

1.执行以下命令安装 style-resources-loader;

vue add style-resources-loader

vue add style-resources-loader 是一个 Vue CLI 插件命令，用于在 Vue 项目中添加 style-resources-loader。这个加载器的主要作用是在每个样式文件（如 .scss 或 .less 文件）中自动引入一些全局样式资源，例如变量、混合宏等。

2.安装 sass-loader 和 node-sass 或 dart-sass

可以选择安装 node-sass 或 dart-sass。dart-sass 是 node-sass 的一个更现代的替代品，推荐使用 dart-sass。

使用 dart-sass：

npm install -D sass-loader sass

使用 node-sass：

npm install -D sass-loader node-sass

3.在项目中使用

lang="scss"

您好，我是肥晨。

欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。