根本原因是sass-loader不识别Webpack的alias路径，@import '@/styles/variables'中的@未被解析；必须通过additionalData全局注入并确保与resolve.alias完全一致，或改用相对路径。
为什么 sass-loader 单独配了还是报错“Can't find stylesheet to import”？
根本原因不是没装 sass，而是 @import 路径没被正确解析。Webpack 默认只认相对路径或 node_modules 下的包，像 @import '@/styles/variables' 这种 alias 写法，sass-loader 根本不识别——它不走 Webpack 的 resolve 逻辑。
解决办法只有两个：
- 用
sass-loader的additionalData选项全局注入变量和 mixin（推荐），例如：{ loader: 'sass-loader', options: { implementation: require('sass'), additionalData: '@import "@/styles/variables"; @import "@/styles/mixins";' } }注意：这里的@/styles/variables必须和 Webpack 配置中resolve.alias完全一致，否则照样报错 - 别用
includePaths—— 它只支持绝对路径或node_modules子目录，对 alias 无效，强行加反而掩盖真实路径问题
sass-loader 和 css-loader 的顺序为什么不能调换？
Webpack 的 use 数组执行顺序是从右往左，这个顺序决定了样式资源能否被正确解析：
-
css-loader在右，负责把@import './base.scss'、url(./img.png)这类语法转成模块依赖，让 Webpack 知道要拉哪些文件 -
sass-loader在中间，把.scss编译成标准 CSS 字符串 -
style-loader或MiniCssExtractPlugin.loader在最左，负责把最终 CSS 插入页面或抽离成文件
如果写成 ['css-loader', 'sass-loader']，css-loader 会尝试解析原始 SCSS 文本（含 @mixin、$var），直接报错；反过来，sass-loader 先吐出纯 CSS，css-loader 才能正常处理其中的 url() 和 @import。
立即学习“前端免费学习笔记（深入）”；
开发环境用 style-loader，生产环境必须换掉
style-loader 把 CSS 打进 JS bundle，上线后有两个硬伤：首屏白屏后突然“闪”出样式（FOUC），且 CSS 无法独立缓存。
生产环境必须用 MiniCssExtractPlugin：
- 安装：
yarn add mini-css-extract-plugin -D - loader 替换：
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] - 插件注册：
plugins: [new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css' })]
注意：MiniCssExtractPlugin.loader 在 mode: 'development' 下直接报错，不能和 style-loader 混在同一个 rule 里——得靠 isProduction 变量做条件判断。
常见错误：安装了 sass-loader 却漏装 sass
sass-loader 是个壳，真正干活的是 sass（Dart Sass）。Webpack 5 要求显式指定实现：
- 必须装：
yarn add sass -D（不是node-sass，后者已废弃） - 配置里必须写：
implementation: require('sass')，否则默认找node-sass，报Cannot find module 'node-sass' - 如果用 pnpm，注意
sass是二进制包，pnpm 的node_modules结构可能导致找不到可执行文件，建议加resolutions锁版本
alias 路径、additionalData 注入、implementation 显式声明——这三个点任何一个漏掉，都会让 sass-loader 表面跑通，实际编译失败或变量不可用。
