rollup-plugin-scss 不支持 extract，仅编译不输出文件；需改用 rollup-plugin-postcss 配置 parser、extract 路径及 assetfilenames 才能生成独立 css 文件。
rollup-plugin-scss 的 extract 配置根本不起作用？
不是插件坏了，而是它压根不支持 extract 选项——这是 rollup-plugin-postcss 的能力，rollup-plugin-scss 默认只编译、不输出文件。你看到控制台没报错、也没生成 CSS，是因为插件默默把结果丢进了 Rollup 的内部资源池，而 Rollup 本身不会主动写磁盘。
实操建议：
- 别用
rollup-plugin-scss单独处理 SCSS 输出需求，它适合内联场景（比如 SSR 中注入 style 标签），不适合生成物理 CSS 文件 - 想提取独立文件，必须换用
rollup-plugin-postcss，并显式传入sass或node-sass作为处理器 - 确保
import './main.scss'出现在某个被 Rollup 入口 JS 引用的路径里，否则插件连运行机会都没有
用 rollup-plugin-postcss + Sass 处理器导出单个 CSS 文件
rollup-plugin-postcss 是目前 Rollup 生态中唯一能稳定实现“SCSS → 独立 CSS 文件”闭环的方案，但关键在配置链路不能断。
实操要点：
- 安装依赖：
npm install -D rollup-plugin-postcss postcss postcss-scss sass - 在插件配置中指定
parser: require('postcss-scss')，否则默认只认.css后缀 -
extract必须设为字符串路径（如extract: 'dist/style.css'）或true（此时依赖output.assetFileNames控制命名） - 禁用注入：
inject: false，否则即使开了extract，也会额外往页面插入一份内联<style></style> - 关闭 sourcemap：
sourceMap: false，避免生成无用的.map文件
为什么 extract: true 却生成了 dist/bundle.js 里塞着 CSS？
这是因为 Rollup 把提取出的 CSS 当作“asset”资源，而你没配 output.assetFileNames，它就按默认规则 fallback 到 JS bundle 里了——不是插件失效，是 Rollup 的资源分发逻辑在起作用。
解决方法很直接：
- 在
output配置里加上：assetFileNames: 'dist/[name].[hash][extname]' - 或者更保守点：
assetFileNames: 'dist/style.css'，强制所有提取的样式都落盘到这个路径 - 注意：如果多个入口都 import SCSS，且没做代码分割，它们会合并进同一个 CSS 文件；想分拆需配合
dynamic imports+output.manualChunks
多主题 SCSS 构建时如何避免 CSS 文件互相覆盖？
SCSS 本身不支持“一次构建、多输出”，rollup-plugin-postcss 也不提供主题维度的并发编译能力。所谓“多主题”，本质是多次独立构建，每次用不同变量覆盖。
关键操作：
- 用
modifyVars（PostCSS 插件层）或additionalData（Sass 层）注入主题变量，不能指望postcss.config.js里的配置生效 - 每个主题对应一个独立的 Rollup 配置对象（
export default [configThemeA, configThemeB]），各自设不同的extract路径 - 不要共用同一份
inputJS 入口——哪怕只改一行变量，也得让 Rollup 重新走完整构建流程，否则缓存会导致 CSS 内容错乱
最易被忽略的一点：SCSS 的 @use 和 @forward 是编译时行为，变量替换发生在 PostCSS 解析阶段之前；如果你把主题变量写在 postcss.config.js 里，它根本不会传给 Sass 编译器。必须把变量透传到 rollup-plugin-postcss 的 plugins 数组中，或者通过 additionalData 注入顶层 SCSS 字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
