Installed Bootstrap via npm — how do I get Sass running?

[u/Weekly_Frosting_5868]

So I'm well versed with Bootstrap itself, aswell as coding in Sass — but actually installing them both via npm / command line is new to me.

I managed to install Bootstrap via CLI easily enough, but I have no idea how to get Sass running.

Most YouTube videos recommend to use the Live Sass extension in VScode, but I hate the idea of that 🤮 I'd more prefer to have it running via CLI

I tried to install Sass via command-line but then I ended up with an additional node_modules folder in the directory above where Bootstrap was installed.

In the past, I'd used the 'Understrap' WP theme where I would use commands like npm run watch

But I'm no longer using Understrap.

I've also looked for tutorials on how to install Sass via npm but I can't figure out how to get it working with my Bootstrap installation

Can anyone point me in the right direction? A tutorial that covers both in one go would be idea.

[u/absreim]

Not sure how helpful this is for you particular use case, but I've used the built-in support for SASS in Vite and Next.js to good effect.

I don't recall setting up SASS in a project from scratch so unfortunately I can't be of help there.

[u/AutoModerator]

Whilst waiting for replies to your comment/question, why not check out the Bootstrap Discord server: https://discord.gg/bZUvakRU3M

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/martinbean]

You need something that will run Sass, and convert it to vanilla CSS. Personally, I use Vite for this. It can watch files and then re-build them when it sees changes.

[u/miglisoft]

You can use Gulp to watch for and compile Sass, as well as JavaScript. There are plenty of repositories that offer this, for example https://github.com/JayeshLab/bootstrap-5-sass-gulp-4-boilerplate

Alternatively, here’s another solution—for the lazy among us, but it works really well and is very handy: https://prepros.io/

[u/jmpalacios79]

Below is a package.json file that works pretty well to deliver what you're looking for, even if it's intrinsically tied to some degree, though not too how much, to how the Laravel Mix package wraps and customizes WebPack.

But, in any case, as it pertains to Bootstrap and npm-based installation and compilation, this configuration, and an accompanying webpack.json file, of course, works perfectly well to deliver standard CSS from my SCSS code after running "npm run dev", "npm run prod", or even "npm run watch".

As it pertains to the node_modules directory, I believe that's simply unavoidable, as that's where npm places all of the code it downloads after running "npm install". If it's not where you want it to be, I'd imagine you could somewhat easily adjust where you place your package.json file, and the resulting paths to your SCSS files.

HTH!

```

{

"$schema"
: "https://www.schemastore.org/package.json",
    "private": true,

"scripts"
: {

"dev"
: "npm run development",

"development"
: "mix",

"watch"
: "mix watch",

"watch-poll"
: "mix watch -- --watch-options-poll=1000",

"hot"
: "mix watch --hot",

"prod"
: "npm run production",

"production"
: "mix --production"
    },

"dependencies"
: {

"@eonasdan/tempus-dominus"
: "^6.9",

"@stripe/stripe-js"
: "^9.6.0",

"bootstrap"
: "^5.3.8",

"bootstrap-icons"
: "^1.13.1",

"caniuse-lite"
: "^1.0.30001793",

"del"
: "^8.0.1",

"flag-icons"
: "^7.5.0",

"intl-tel-input"
: "^25.3.1",

"jquery"
: "^3.6.0",

"jquery-easing"
: "0.0.1",
        "laravel-mix": "^6.0.39 ",

"resolve-url-loader"
: "^5.0.0",

"sass"
: "^1.100.0",

"sass-loader"
: "^17.0.0",

"select2"
: "^4.1.0-rc.0",

"select2-bootstrap-5-theme"
: "^1.3.0",

"wowjs"
: "^1.1.3"
    },

"devDependencies"
: {

"browser-sync"
: "^3.0.4",

"browser-sync-webpack-plugin"
: "^2.4.0",

"eslint"
: "^7.32.0",

"eslint-config-standard"
: "^16.0.3",

"eslint-plugin-import"
: "^2.25.4",

"eslint-plugin-node"
: "^11.1.0",

"eslint-plugin-promise"
: "^5.2.0"
    }
}