如何阻止Rollup.js构建SCSS时生成空chunk文件？

问题原因 #

Rollup本质是JavaScript打包工具，当处理SCSS文件时，rollup-plugin-scss会提取并生成目标CSS文件，但Rollup仍会为SCSS入口生成对应的JS chunk——由于SCSS转译后没有可执行JS代码，这个chunk内容为空，因此会生成空的screen.js并抛出警告。

解决方案 #

方法1：自定义插件删除空chunk（推荐）

添加一个轻量的自定义插件，在Rollup打包的最后阶段删除空的代码块，彻底阻止空文件生成：

修改SCSS对应的配置项，在plugins数组中加入以下自定义插件：

{
    input: 'src/scss/screen.scss',
    output: { dir:'dist/css'},
    plugins: [
        scss({
            fileName: 'css.css',
            sourceMap: true,
            processor: () => postcss([autoprefixer()])
        }),
        // 新增：删除空chunk的自定义插件
        {
            name: 'remove-empty-scss-chunk',
            generateBundle(options, bundle) {
                Object.keys(bundle).forEach(key => {
                    const chunk = bundle[key];
                    // 判断是否为空代码块
                    if (chunk.type === 'chunk' && chunk.code.trim() === '') {
                        delete bundle[key];
                    }
                });
            }
        }
    ]
}

配置后，Rollup会自动移除空chunk，控制台警告消失，仅生成目标CSS文件。

方法2：指定临时文件名并忽略

通过Rollup的output.entryFileNames配置，将空chunk生成一个隐藏的临时文件，后续可通过.gitignore忽略它：

{
    input: 'src/scss/screen.scss',
    output: {
        dir:'dist/css',
        entryFileNames: '.empty.js' // 生成隐藏的空文件
    },
    plugins: [
        scss({
            fileName: 'css.css',
            sourceMap: true,
            processor: () => postcss([autoprefixer()])
        })
    ]
}

之后在项目根目录的.gitignore中添加.empty.js，避免该文件被提交到版本库。

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