Rollup-plugin-scss未执行求助：SCSS文件无输出

我正在学习用Rollup打包一个小型JS/SCSS项目，希望Rollup能同时打包并压缩JS和SCSS文件。目前执行Rollup时JS文件处理正常，但SCSS文件没有生成输出，麻烦帮忙排查配置错误。

我的Rollup配置文件 #

import scss from 'rollup-plugin-scss'

export default {
    input: 'src/js/main.js',
    output: [
        {
            file: "dist/main.js",
            format: 'cjs'
        },
    ],
    plugins: [
        scss({
            name: "dist/main.css",
            include: "src/sass/main.scss",
            outputStyle: "compressed",
            verbose: true, 
        }),
    ],
};

控制台输出 #

$ rollup --config rollup.config.js

src/js/main.js → dist/main.js...
created dist/main.js in 47ms

问题排查与修复方案 #

1. 核心问题：SCSS文件未被Rollup依赖树包含 #

Rollup是基于入口文件的依赖关系打包的，你的入口是src/js/main.js，但src/sass/main.scss没被这个JS文件引入，所以Rollup不会处理该SCSS文件。

2. 配置参数错误修正 #

• name不是指定CSS输出路径的参数，正确参数为output
• include属于多余配置，反而可能限制插件处理范围，直接移除即可

修正后的配置文件 #

import scss from 'rollup-plugin-scss'

export default {
    input: 'src/js/main.js',
    output: [
        {
            file: "dist/main.js",
            format: 'cjs'
        },
    ],
    plugins: [
        scss({
            output: "dist/main.css", // 替换name为output
            outputStyle: "compressed",
            verbose: true, 
        }),
    ],
};

3. 关键步骤：在JS入口中引入SCSS #

在src/js/main.js里添加SCSS文件的引用：

// src/js/main.js
import '../sass/main.scss';

// 你的其他JS代码...

重新执行rollup --config rollup.config.js，就能同时生成压缩后的dist/main.js和dist/main.css了。

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