If you would like the option to customize the Bootstrap Sass files in order to use them in your project, you can automate the Sass compilation process by creating a Gulp task for it.
Visual Studio Code supports the ability to run tasks and analyze their results from inside it. Task can include many things such as compiling Sass, minifying CSS, or copying files to different folders.
In order to configure task inside Visual Studio Code, follow these steps:
Configure Task Runner
.vscode
with a new tasks.json
file inside it. npm install gulp gulp-sass
tasks.json
file to the following:{ "version": "0.1.0", "command": "gulp", "isShellCommand": true, "tasks": [ { "taskName": "compile-sass", "isBuildCommand": true, "showOutput": "always", "isWatching": true } ] }
tasks.json
file and add a new file called gulpfile.js
to the root of your project.gulpfile.js
file to the following:var gulp = require('gulp'); var gulpSass = require('gulp-sass'); gulp.task('compile-sass', function () { gulp.src('./bower_components/bootstrap/scss/bootstrap.scss') .pipe(gulpSass()) .pipe(gulp.dest('./wwwroot/css')); });
bootstrap.scss
SASS file located in the ./bower_components/bootstrap/scss/
folder and copy the CSS file to the wwroot/css
folder as bootstrap.css
. Tasks: Run Task
compile-sass
from the list.After the compile-sass
task has completed, you should see a bootstrap.css
file inside the wwwrootcss
folder. Your project layout should be similar to the following inside the Visual Studio Code Explorer:
3.149.27.72