VueJS Rollup export multiple scss resources

Question

Is it possible to export multiple (s)css resources using Rollup for Vue? What I want to accomplish is:

components.scss extracted <style lang="scss"> from src/components/**/*.vue (including @import files).
components.css parsed components.scss with tailwindcss and autoprefixer.
theme.scss default generic theme styling (buttons, etc)
theme.css parsed theme.scss with tailwindcss and autoprefixer

So far I have managed to get dist/components.scss bundled using rollup-plugin-bundle-scss but I am not sure how to add the other files. If I import theme.scss in my index.js entry file, it is added to the bundle also, which is not what I want. I could expose src/assets/theme.scss in the package.json but I still need a parsed version

If there is a way to copy components.scss before bundling, than that would also be a good option.

Part of my 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,
  ],
};

Any thought on how to achieve this?

Snakemaster Snakemaster · Accepted Answer · 2020-08-31T14:27:38

I guess I just rubberducked myself. After posting this I noticed an example config with multiple export entries so I added a config entry with theme.scss as input. The output is like expected.

1 thing I don't like is that the build process triggers a warning

The emitted file "theme.css" overwrites a previously emitted file of the same name.

Meaning the output is written twice, I don't know why that happens or if it can be ignored.

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

VueJS Rollup export multiple scss resources

1 Answers