Vue.js VueJS汇总导出多个scss资源

是否可以使用Rollup for Vue导出多个css资源？ 我想完成的是：

• components.scss从src/components/***.vue（包括@import文件）中提取

• components.css使用tailwindcss和autoprefixer解析的components.scs
• 主题.scss默认通用主题样式（按钮等）
• theme.css使用tailwindcss和autoprefixer解析的theme.scs

到目前为止，我已经成功地使用rollup plugin bundle scss绑定了dist/components.scss，但我不确定如何添加其他文件。如果我在index.js条目文件中导入theme.scss，它也会添加到包中，这不是我想要的。我可以在package.json中公开src/assets/theme.scss，但我仍然需要一个解析版本

如果有办法在绑定之前复制components.scs，那么这也是一个不错的选择

我的rollup.config.js的一部分

 plugins: [      
  bundleScss({output: 'components.scss', exclusive: false }),
  scss(),
  postcss(),
  resolve({ extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'] }),
  vue( { css: true })
 ]

const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};

postss.config.js

 plugins: [      
  bundleScss({output: 'components.scss', exclusive: false }),
  scss(),
  postcss(),
  resolve({ extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'] }),
  vue( { css: true })
 ]

const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};

---

有没有想过如何做到这一点？

我想我只是把自己搞砸了。在发布这篇文章之后，我注意到一个示例配置包含多个导出条目，因此我添加了一个配置条目，并将theme.scss作为输入。输出与预期一致

我不喜欢的一件事是构建过程会触发警告

发出的文件“theme.css”覆盖以前发出的 同名

这意味着输出被写入两次，我不知道为什么会发生这种情况，或者是否可以忽略它

const cssOnlyConfig = {
  input: 'src/assets/theme.scss',
  output: {
    file: 'dist/theme.css',
    format: 'es',
    exports: 'default'
  },
  plugins: [
    postcss({
      modules: false,
      extract: true
    }),
    vue({
      css:true,
    }),
  ],
};