VueJS Rollup导出多个Scss资源

问题描述

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

• components.scss 从src / components / ** / *。vue（包括@import文件）中提取了<style lang="scss">。
• components.css 使用tailwindcss和autoprefixer解析了components.scss。
• theme.scss 默认的通用主题样式（按钮等）
• theme.css 使用tailwindcss和autoprefixer解析了theme.scss

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

如果有一种在捆绑之前复制components.scss的方法，那将是一个不错的选择。

我的rollup.config.js的一部分

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

postcss.config.js

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,}),],};