How to setup global bootstrap via scss in Svelte?

Question

I want to use Bootstrap (v4.5) in a Svelte (v3) project with custom theme.

The bootstrap documentation states that you can do this with scss. So I've setup Svelte with svelte-preprocess as follows:

Added to my package.json:

    "bootstrap": "^4.5.2",
    "node-sass": "^4.14.1",
    "svelte-preprocess": "^4.0.10",

In my rollup.config.js:

...
import preprocess from "svelte-preprocess";

export default {
  ...,
  plugins: [
    ...,
    svelte({
      // enable run-time checks when not in production
      dev: !production,
      // we'll extract any component CSS out into
      // a separate file - better for performance
      css: (css) => {
        css.write("public/build/bundle.css");
      },
      preprocess: preprocess(),
    }),

In my App component:

<style type="text/scss" global>
  // Variable overrides for bootstrap
  $primary: #19197c;
  $secondary: #fd6400;
  $light: #d8d8d8;

  @import "../node_modules/bootstrap/scss/bootstrap";

</style>

Unfortunately, it looks like Svelte purges all the styles since I don't get bootstrap styling in my application. I would like to use bootstrap normalization as well as bootstrap classes. Any tips? Thanks!

Schnabel

Answer 1

I figured out how to get this working. You have to separately process the sass outside of Svelte, using rollup-plugin-scss, so that the classes are not purged.

In rollup.config.js:

...
import scss from "rollup-plugin-scss";

export default {
  ...,
  plugins: [
    ...,
    svelte({
      // enable run-time checks when not in production
      dev: !production,
      emitCss: true
    }),
    scss(),
    ...,

Create a new file called main.scss:

// Variable overrides for bootstrap
$primary: #19197c;
$secondary: #fd6400;
$light: #d8d8d8;

@import "../node_modules/bootstrap/scss/bootstrap";

In main.js:

import "./main.scss";
import App from "./App.svelte";

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

export default app;

That's it!

Schnabel

thank you . but if i import my own custom scss file , style will not update when i change it . i need to comment @import , save file , uncomment it , save , then it updates . – Yuma

@BabakKarimiAsl Update the scss plugin like this scss({watch: 'src'}) to watch the scss file in src folder for changes. – Greg

@BabakKarimiAsl also to keep you build bundle clean do not import the scss file in main.js but add output path like this scss({watch: 'src',output: 'public/global.css'}) and directly link the output file global.css in index.html – Greg

Answer 2

I actually found a much easier way, using Svelte Preprocess! All you need to do, in App.svelte

<!-- app.svelte content -->
...
<!-- ... -->

<style lang="scss" global>
  @import "path/to/your/scss/files";
</style>

Just note that if you use "./..." in the @import, that means it's referencing local files. If there is no "./..." (so just plain "name", then it will import from node_modules.

And that's it! If you wanted to use the settings, all you would need to do is

Hetaerism

Answer 3

I usually use <svelte:head> to set global stuff.

Example

<svelte:head>
  <!-- Google Font -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

  <style>
    /* Global CSS via SASS */
    @import '../../_assets/sass/global';

    ._another_global_stuff {
      z_index: 1001;
    }
  </style>
</svelte:head>

And rollup setup is very simple.

Example

Modules required:

• svelte-preprocess
• rollup-plugin-css-only
• postcss
• autoprefixer
• node-sass

let plugins = [
  //...
  svelte({
    compilerOptions: {
      dev: !production
    },
    preprocess: sveltePreprocess({
      sourceMap: !production,
      defaults: {
        style: 'scss'
      },
      postcss: {
        plugins: [
          require('autoprefixer')()
        ]
      }
    }),
    emitCss: true
  }),
  css({output: 'bundle.css'}),
  //...
]

Unpin