Vue.js中SCSS样式未加载生效：无控制台报错

问题详情 #

• 开发Vue.js Web应用，计划使用SCSS预处理器
• 已执行命令安装依赖：npm i node-sass sass-loader
• 根目录创建vue.config.js配置全局SCSS自动导入：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/style.scss";`,
      },
    },
  },
};

• 全局样式拆分编写在main.scss中，style.scss负责导入这些拆分文件：

@import './color';
@import './mixin';
@import './break-point';
@import './common';
@import './form';

• 异常表现：Web应用未加载任何.scss文件或style.scss导入的样式，控制台无报错；尝试在各页面独立.scss文件中导入style.scss，问题依然存在。

排查与解决步骤 #

1. 核对依赖版本兼容性 #

node-sass已停止维护，且不同版本的sass-loader、node-sass与Vue CLI、Node.js版本存在兼容性要求，版本不匹配会导致样式加载失败：

• 先卸载现有依赖：npm uninstall node-sass sass-loader
• 根据Vue CLI版本重新安装：
  • Vue CLI 4.x：推荐安装node-sass@4.14.x + sass-loader@8.x
  • Vue CLI 5.x：替换为sass（dart-sass，替代停止维护的node-sass），安装命令：npm install sass sass-loader@10.x

2. 校验文件路径正确性 #

• Vue中@默认指向src目录，确认style.scss是否在src根目录下，若路径不符，修改prependData（或additionalData）中的导入路径，例如style.scss在src/styles下时，需写成@import "@/styles/style.scss";
• 检查main.scss中导入的子文件路径，确保color.scss、mixin.scss等文件与main.scss处于同一目录，路径错误会导致样式无法加载但控制台可能无报错。

3. 修正vue.config.js配置项（适配sass-loader版本） #

• sass-loader@9.x及以上版本中，prependData已被重命名为additionalData，需更新配置：

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/style.scss";`,
      },
    },
  },
};

4. 检查单文件组件的样式标签配置 #

• 在Vue单文件组件中使用SCSS时，必须为<style>标签添加lang="scss"属性：

<style lang="scss">
/* 可直接使用全局导入的变量、混合宏等 */
</style>

• 若页面单独导入style.scss，需确保路径正确且标签声明了lang="scss"：

<style lang="scss">
@import "@/style.scss";
/* 页面自定义样式 */
</style>

5. 清除缓存并重启项目 #

• 清除npm缓存：npm cache clean --force
• 删除node_modules和package-lock.json文件，重新执行npm install
• 重启开发服务器，确保配置修改生效

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