VueJS汇总导出多个scss资源

Question

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

• 组件。SCS已提取<代码>

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

如果有办法复制组件。在捆绑之前使用SCS，这也是一个不错的选择。

这是我总结的一部分。配置。js

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

邮政编码。配置。js

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

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

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

Answer 1

我想我只是回避了自己。发布此帖子后，我注意到一个包含多个导出条目的示例配置，因此我添加了一个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,
    }),
  ],
};