I started working on a small project that compiles to a small set of static HTML+CSS. Since I don’t have any Javascript in it, using Webpack didn’

Adding Bootstrap styles to a project without Webpack

submited by

Style Pass

2020-06-26 12:46:07

I started working on a small project that compiles to a small set of static HTML+CSS. Since I don’t have any Javascript in it, using Webpack didn’t look the right way to include the Bootstrap files I wanted. Especially since Webpack requires a JS file as the entry.

First of all, you need the SASS client to compile the styles. On MacOS you can use Dart SASS. Installing it from Homebrew is a matter of one command line:

If you’re not using any NPM dependencies, i.e. don’t have a package.json file, you may go to your project’s root dir and create it with:

Then, add the following scripts to the package.json — notice that if you already have a package.json in your project, the script names below (watch and build) may already exists. In that case, add some suffix to avoid conflicts. watch-styles and build-styles, for instance.

In these scripts, the respective paths to the main SASS file and target CSS files are src/styles/app.scss and dist/styles/app.css. You may have to tweak those paths to match your current project structure.