how to have multiple css bundle in svelte with SCSS

user_5457113 0
Viewed 1402

Traditionally if I have external scss files (global1.scss, global2.scss) in svelte, I would import them inside App.svelte like below code, and at the end, all external scss files will be merged into bundle.css

//App.svelte
...
<style>
  :global {
     import "styles/global1"; //will import global1.scss
     import "styles/global2"; //will import global1.scss
  }
</style>

However, I have sightly different requirement for my app. Instead of all scss being merged into same css file, I want a new bundle for each external scss file like so:

bundle.css // for component styles
global1.css //for global1.scss
global2.css //for global2.scss

How can I achieve this? Thanks!

svelte-3 svelte
1 Answers

If you're okay with the global stylesheets being combined into one global stylesheet, you can use rollup-plugin-scss. The plugin doesn't seem to support outputting a stylesheet per imported file.

First, import your global scss files in your entrypoint (main.js).

import App from './App.svelte';
import './style1.scss';
import './style2.scss';

const app = new App({
    target: document.body
});

export default app;

Then add rollup-plugin-scss to your config to handle the scss imports. It will take all imported scss files and output them to global.css.

// rollup.config.js
import scss from 'rollup-plugin-scss';

export default {
    // ...
    plugins: [
        // ...
        scss({
            output: 'public/build/global.css',
            include: ['/**/*.scss'] // do not include Svelte-generated *.css files
        }),

    ],
    // ...
};

This config will output global.css to your public/build directory. bundle.css should still be generated from the Svelte compilation.

user_148089880
Related