Customising Bootstrap path with grunt-sass

Question

I've installed bootstrap-sass and grunt-sass, and want to customise the bootstrap components included in my build.

I've created a copy of _bootstrap.scss in my app/styles/ folder and need to override the default import paths - what changes do I need to make to my Gruntfile for this to work?

I've tried including the full path the Bootstrap partials in my _bootstrap.scss file, but that doesn't compile. Gruntfile extract below.

Gruntfile

// Compiles Sass to CSS and generates necessary files if requested
sass: {
    options: {
        sourceMap: true,
        sourceMapEmbed: true,
        sourceMapContents: true,
        includePaths: ['.']
    },
    dist: {
        files: [{
            expand: true,
            cwd: '<%= config.app %>/styles',
          src: ['*.{scss,sass}'],
          dest: '.tmp/styles',
          ext: '.css'
        }]
      },
      server: {
        files: [{
          expand: true,
          cwd: '<%= config.app %>/styles',
          src: ['*.{scss,sass}'],
          dest: '.tmp/styles',
          ext: '.css'
        }]
      }
    },

It's not very clear what you are trying to accomplish. Can you break it down to smaller pieces? — bosch, Aug 06 '15 at 13:23
I've installed bootstrap-sass but only want to include particular components. I don't want to modify the package source, I want to use my own version of _bootstrap.scss within my project - can I set the load path? — Nathan, Aug 06 '15 at 23:19

score 0 · Answer 1 · answered Oct 07 '15 at 14:38

Here is what I did using Grunt and Bower along with Bootstrap to make a custom install including / excluding bootstrap components which might help you.

Once I had Grunt and Bower set up I added bootstrap-sass using bower install boostrap-sass --save-dev so that my bower.json file was updated.

Modifying Bootstrap

I imported bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss into my my styles.scss file.

Then edited _bootstrap.scss commenting out which ever components I didn't want or need.

Next, created a file called _main.scss and stored this in a subdirectory (partials) of where my styles.scss file was, then imported _main.scss below the _bootstrap.scss.

This way I could override bootstrap if need be with my own custom styles by editing _main.scss.

Here's a starter grunt setup I used which might help explain the file structure.

Styles.scss file

// Bootstrap
@import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';

// Custom styles
@import 'partials/main';

Gruntfile.js

module.exports = function(grunt){

    // Configure task(s)
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        // setup uglify task
        uglify: {
            build: {
                files: {
                    'js/scripts.min.js': ['bower_components/jquery/dist/jquery.min.js', 'bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js', 'src/js/*.js']
                },
            },
            dev: {
                options: {
                    beautify: true,
                    mangle: false,
                    compress: false,
                    preserveComments: 'all'
                },
                files: {
                    'js/scripts.min.js': ['bower_components/jquery/dist/jquery.js', 'bower_components/bootstrap-sass/assets/javascripts/bootstrap.js', 'src/js/*.js']
                },
            },
        },

        // setup watch task
        watch: {
            js: {
                files: ['bower_components/**/*.js', 'src/js/*.js'],
                tasks: ['uglify:dev']
            },
            css: {
                files: ['src/scss/**/*.scss'],
                tasks: ['sass:dev']
            },
        },

        // setup sass
        sass: {
            dev: {
                options: {
                     outputStyle: 'expanded'
                },
                files: {
                    'css/styles.min.css' : 'src/scss/styles.scss'
                },
            },
            build: {
                options: {
                    outputStyle: 'compressed'
                },
                files: {
                    'css/styles.min.css' : 'src/scss/styles.scss'
                },
            },
        },
    });

    // Load the plugins
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-sass');

    // Register task(s)
    grunt.registerTask('default', ['uglify:dev','sass:dev']);
    grunt.registerTask('build', ['uglify:build', 'sass:build']);
};

From there you should be able to add your own custom bootstrap styles and / or remove components from bootstrap you don't want. Then just run grunt or grunt build depending on whether you want a development output (non minified or not). Or grunt watch while you are editing for instant compile. Add in livereload chrome extension and the app and you'll have live updates across all files.

A couple of months late.. but hope this helps!

Customising Bootstrap path with grunt-sass

1 Answers1