如何在VueJS项目中正确导入SCSS文件？导入SCSS文件报错如何解决

问题根因 #

• 依赖版本不兼容
  你当前使用的@vue/cli-service@4.5.x基于webpack4构建，而你安装的sass-loader@12.x仅支持webpack5，版本不匹配会直接导致编译报错。同时node-sass已经官方废弃，同时安装sass和node-sass会产生包冲突，且你将sass相关依赖错误放在了生产依赖dependencies中，应该放入开发依赖devDependencies。
• 导入路径和文件名不规范
  导入scss文件时如果没有配置后缀自动解析，需要补全.scss后缀，直接写header会导致编译器无法识别对应文件。使用src/开头的绝对路径在部分场景下会存在解析错误，推荐使用vue-cli默认支持的@路径别名（指向src目录）。
• 样式作用域问题
  如果你的style标签添加了scoped属性，导入的样式会被自动加上局部唯一属性，若你导入的是全局样式则会失效。

解决步骤 #

1. 首先卸载错误安装的依赖

npm uninstall node-sass sass-loader

2. 安装适配版本的依赖

npm install -D sass@1.x sass-loader@10.x

3. 修改SCSS导入语句
   示例（以Header.vue存放在src/components目录下为例）：

<style lang="scss">
/* 推荐使用别名写法，不需要考虑文件相对位置 */
@import "@/assets/styles/header.scss";
/* 也可使用对应相对路径写法 */
/* @import "../assets/styles/header.scss"; */
</style>

如果需要在scoped的style标签中导入全局样式，可以在路径前加波浪线：

@import "~@/assets/styles/header.scss";

额外提醒：确认你的scss文件路径和文件名完全匹配，若文件是下划线开头的sass模块（比如_header.scss），导入时也要带上下划线。

内容的提问来源于stack exchange，提问作者dokichan