'How to setup global bootstrap via scss in Svelte?
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!
Solution 1:[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!
Solution 2:[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
Solution 3:[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'}),
//...
]
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Lissy93 |
Solution 2 | Marcosaurios |
Solution 3 | Thiago Lagden |