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

Question

我在项目中使用rollup withrollup plugin scssplugin捆绑css。是否可以同时生成这两个。css和。min.css使用这个插件还是其他插件？

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

我试图添加outputStyle:“compressed”，但这只生成压缩版本，而不是两者。

Answer 1

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

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

请注意，这个设置没有任何日志记录或文件大小，或者从常规插件中获得的任何内容，但这是可以相当容易地添加到函数中的内容。