Search code examples
twitter-bootstrapsassbootstrap-5parceljs

Is it possible to run SCSS and Bootstrap, without using VSC extensions?

I have a working setup, with sass and parcel bundler installed through npm. Problem is - every time I add Bootstrap, either by installing through npm or downloading the package by myself, my developer server (run by parcel) starts lagging very much. Every change I make takes about 7 s. for the server to build.

In Sass installation guide it is written that npm installation

runs somewhat slower

so I tried installing Sass by downloading the package and adding it to my PATH, following the guide, but that didn't help. My question is - can someone please confirm that it is possible running SCSS and Bootstrap, without using extensions - couse currently that's the only option I see. How do other developers solve this problem - or maybe it is something wrong with my setup?

PS. When trying to use Bootstrap CDN - server stops responding to my scss file, it only responds to html - which is something I don't understand as well.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="scss/main.scss">
    <!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> -->

</head>
<body>
    <h1>test</h1>
    <h2>test 1,2</h2>


    <!-- bootstrap CDN : -->

    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> -->
</body>
</html>

main.scss

@import "~bootstrap/scss/bootstrap";

body {
    background-color: rgb(194, 147, 98);
}

package.json

{
  "name": "48.-new-saas-setup",
  "version": "1.0.0",
  "description": "",
  "source": "./src/index.html",
  "scripts": {
    "dev": "parcel",
    "build": "parcel build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@parcel/transformer-sass": "^2.4.1",
    "parcel": "^2.4.1",
    "sass": "^1.50.1"
  },
  "dependencies": {
    "bootstrap": "^5.1.3"
  }
}

folder structure:

enter image description here

3 first server builds :

enter image description here

enter image description here

enter image description here

Solution

  • Thanks for providing the detailed reproduction - I'm able to see the slowdown on my end (although it's not as drastic, probably because my PC as faster).

    Here's a (simplified) dependency graph of your app:

    index.html => scss/main.scss => node_modules/bootstrap/scss/bootstrap

    It looks like what is happening is that whenver main.scss changes, parcel is re-processing node_modules/bootstrap/scss/bootstrap (which imports a large number of things, and takes a while). I suspect there is a bug here.

    However, you can work around the issue and speed things up dramatically by changing the dependency graph to this:

    index.html => main.scss
           => boostrap.scss => node_modules/bootstrap/scss/bootstrap

    i.e. you'd add a boostrap.scss file whose only job is to import bootstrap - you'd have very little need to touch it in development.

    So your index.html file would have these lines:

    <link rel="stylesheet" href="scss/bootstrap.scss" />
<link rel="stylesheet" href="scss/main.scss">

    main.scss would look like this:

    // No bootstrap import here.
body {
    background-color: rgb(220, 147, 20);
}

    And bootstrap.scss would look like this:

    @import "~bootstrap/scss/bootstrap";
// Nothing else here.

    In my tests, that dramatically speeds up the inner-loop rebuild when you make changes to main.scss.

    (I tried importing ~bootstrap/scss/bootstrap directly from index.html, but that won't work due to this issue).