rollup ，如何同时捆绑 .css 和 min.css

Question

我在项目中使用带有 rollup-plugin-scss 插件的 rollup 来捆绑 css。是否可以使用此插件或其他一些插件同时生成 .css 和 .min.css？

plugins: [
        scss({
            output: path.resolve(__dirname, 'projects/project_name/main.css'),
        })
]

我尝试添加 outputStyle: "compressed" 但这只是压缩版本，而不是两者。

Answer 1

开箱即用是不可能的，但您可以挂钩 output 选项，该选项也将函数作为选项并手动写入两个文件（包括压缩步骤）。在下面的示例代码中，我使用了 clean-css，但还有很多其他可用的包。

scss({
  output: function (styles, styleNodes) {
    fs.writeFileSync('bundle.css', styles)
    const compressed = new CleanCss().minify(styles).styles;
    fs.writeFileSync('bundle.min.css', compressed)
  }
})

请注意，此设置没有任何日志记录或文件大小或您从常规插件中获得的任何内容，但可以很容易地将其添加到函数中。

rollup ，如何同时捆绑 .css 和 min.css

rollup , how to bundle .css and min.css at the same time

rollup

rollupjs