This is my first time delving into the world of bootstrap-sass, and from what I gather from the documentation, it seems like having a build tool to preprocess the SCSS files is a must before using this module. While there may be newer tools out there, good ol' Gulp still proves to be reliable in handling this task and moving files from node_modules to your project root directory.
If you're considering giving this a go, here's an approach you can take:
- To start off, create three subfolders in your project root directory -
sass, css, and javascript.
- In the
sass folder, create a file named app.scss. Open it up and insert this: @import './node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss';
. When this file gets converted to CSS, all the Bootstrap modules will be included. You're welcome to add your own style rules below the @import statement on line 1.
- If you've already initialized npm with
npm init and have a package.json file in your project directory, then go ahead and run npm install gulp -D in your terminal to get Gulp set up.
- Next, execute
npm install gulp-sass --save-dev to install the gulp plugin that will preprocess the Bootstrap SASS files into CSS.
- Create a file directly in your project root (not inside any subfolders) called
gulpfile.js
- Copy and paste the following content into
gulpfile.js:
(please note: for this to function properly, ensure your SASS and CSS folders are named sass and css respectively, unless you modify these names in the code provided.)
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass-to-css', function () {
return gulp.src('./sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('javascript', function () {
return gulp.src('./node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js')
.pipe(gulp.dest('./javascript'));
});
gulp.task('default', ['sass-to-css', 'javascript']);
Finally, run gulp in your terminal to trigger the gulpfile, which will do the following:
- Process and relocate all the SASS files to your
css folder.
- Copy the
bootstrap.min.js from node_modules to your project's javascript directory.
Remember to properly link these assets within your HTML files.
I threw together this gulpfile quickly and it works smoothly on my end. If you decide to give this method a shot and run into any issues, feel free to reach out if something goes awry. Good luck with your project!