rollup-plugin-scss 不支持 fileName 参数,只认 output(字符串或函数);SCSS 文件需被 JS 显式 import 才触发处理;CSS 提取依赖 output.assetFileNames 配置;模块化与压缩需改用 rollup-plugin-postcss。

rollup-plugin-scss 的 fileName 参数根本不存在
你配置了 fileName: "dist/main.css" 却没生成文件,是因为该插件压根不接受这个选项——它只认 output(字符串路径)或 output: (css, styleNodes) => {...} 函数。写错参数名会导致插件静默跳过 SCSS 处理,Rollup 甚至不会报错,只会默默打包 JS。
常见错误配置:
-
scss({ fileName: "dist/main.css" })→ 无效,被忽略 -
scss({ output: "dist/main.css" })→ ✅ 正确,会写出独立 CSS -
scss({ output: (css) => fs.writeFileSync("dist/main.css", css) })→ ✅ 也正确,但需自行引入fs
SCSS 文件必须被 JS 显式 import 才会触发处理
Rollup 默认跳过所有 .scss 后缀文件,rollup-plugin-scss 不是全局扫描器,它只响应 JS 中的 import 语句。如果入口文件里没写 import './main.scss',插件完全不会运行。
检查点:
立即学习“前端免费学习笔记(深入)”;
- 确认
src/main.js或其他入口文件中存在import './main.scss';(注意:不是require(),ESM 才触发) - 确保
include选项匹配实际路径,比如include: ['src/**/*.{scss,sass}'],别漏掉子目录 - 若用
alias插件,确保别把.scss路径 alias 成了 JS 模块(会绕过 SCSS 插件)
extract 逻辑不在 rollup-plugin-scss 里,而在 output.assetFileNames
即使 output: "dist/main.css" 写对了,生成的 CSS 文件仍可能被塞进 JS bundle 里——因为 Rollup 默认把所有非 JS 资源归为 “asset”,而 output.assetFileNames 没配的话,它会 fallback 到 output.file 路径并追加哈希,结果就是 dist/main.js_abc123.css 这种怪名字,甚至直接内联进 JS 字符串。
必须显式声明:
export default {
// ...
output: {
assetFileNames: 'dist/[name].[ext]', // ✅ 让 .css 落地为 dist/main.css
// 或更安全:assetFileNames: 'dist/styles/[name].[hash].[ext]'
}
}
否则你看到的“没输出 CSS”其实是“输出了但名字不对 + 被当 JS asset 处理了”。
想同时支持 CSS Modules 和压缩?别用 rollup-plugin-scss
这个插件只编译 SCSS → CSS,不处理模块化、不走 PostCSS 流程、不支持 autoprefixer 或 cssnano。如果你需要类名哈希、作用域隔离、自动加前缀或压缩,得换 rollup-plugin-postcss 并配 sass 加载器:
postcss({extract: 'dist/main.css',modules: true,plugins: [require('sass')(), require('autoprefixer')(), require('cssnano')()]})
这时候 import './Button.module.scss' 才真能产出带哈希的 scoped 类名 + 独立压缩 CSS 文件。


















