rollup-plugin-scss 的 extract 配置必须显式指定 filename，否则编译后的 css 会被丢弃；filename 必须是字符串路径（如 'dist/index.css'），name 字段无效，且不支持占位符。
rollup-plugin-scss 的 extract 配置必须显式指定 fileName
很多人以为装上 rollup-plugin-scss 就能自动生成 CSS 文件，结果跑完构建只看到 JS 输出、控制台安静如鸡。根本原因是：该插件默认不提取文件，必须通过 fileName 显式告诉它“写到哪”。不写这个，SCSS 编译后就直接丢弃了，连错误都不会报。
常见错误写法：scss({ name: "dist/main.css" }) —— name 是无效字段，会被忽略；正确字段是 fileName。
-
fileName必须是字符串路径（如'dist/index.css'），支持相对路径，但不能是空值或布尔值 - 路径中若含目录（如
dist/），需确保该目录存在，否则构建失败且提示模糊（常见报错：ENOTDIR） - 多个 SCSS 入口时，
fileName不支持占位符（如[name]），所有样式都会被合并写入同一个文件
如何让 SCSS 编译结果参与 PostCSS 处理链
单独用 rollup-plugin-scss 只做编译，不加前缀、不压缩、不启用 CSS Modules。如果项目已配 rollup-plugin-postcss，别把它和 SCSS 插件并列放在 plugins 数组里——它们会争抢处理 .scss 后缀，大概率触发 Cannot read property 'replace' of undefined。
正确做法是：只留 rollup-plugin-postcss，并在其配置中声明 SCSS 解析能力：
- 安装
postcss-scss和sass（或node-sass） - 在
postcss({ parser: require('postcss-scss') })中指定解析器 - 把 SCSS 文件后缀改为
.scss或.sass，然后像普通 CSS 一样import './index.scss' - PostCSS 插件（如
autoprefixer()、cssnano()）会自动作用于编译后的 CSS
output.assetFileNames 对 CSS 输出路径的控制权优先级最高
即使你写了 fileName: 'dist/style.css'，最终 CSS 文件仍可能出现在 dist/chunks/xxx.css 或干脆塞进 JS 里——因为 output.assetFileNames 的匹配规则覆盖了插件内部路径逻辑。
必须显式配置 asset 路径模板，否则 Rollup 会按默认规则分配（比如把 CSS 当作 chunk asset 放进 assets/ 子目录）：
- 推荐写法：
assetFileNames: 'assets/[name]-[hash][extname]' - 如果想强制所有 CSS 输出到根
dist/下，可用正则匹配：assetFileNames: (asset) => asset.name.endsWith('.css') ? '[name]' : 'assets/[name]-[hash][extname]' - 注意：
[name]指原始文件名（不含路径），不是fileName里写的值
为什么 import './Button.scss' 后没生成任何 CSS？先查这三件事
静默失败最常卡在这三个地方，顺序检查比重配插件更快：
- 入口 JS 文件里是否真有
import './Button.scss'？没有这行，插件根本不会启动 -
rollup-plugin-postcss是否开启了extract: true（或字符串路径）？没开就只内联，不落地 - 输出配置中是否漏了
assetFileNames？没配就无法控制 CSS 文件名和位置，容易被吞进 JS bundle 或丢进奇怪子目录
真正难调的不是插件怎么写，而是哪个 import 触发了哪条处理链、哪个配置项在暗处接管了输出路径——这些细节一旦错位，CSS 就会凭空消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
