igogra
igogra

Reputation: 465

Customize Bootstrap (sass) avoiding be overrided by someone else when packages are installed via Bower

I would like to know the best way to customize Bootstrap (sass) to avoid being overridden by someone else when packages are installed via Bower.

Let's say I have a project with Grunt, Bower and Bootstrap (sass).

In bower.json I have some dependencies as bootstrap-sass:

{
  ...
  "dependencies": {
    "bootstrap-sass": "^3.3.7",
    ...
  }
}

Through Grunt I install all packages from the Bower dependencies, which are downloaded in the /bower_components folder. Then all scss bootstrap files are copied from /bower_components/bootstrap-sass/assets/stylesheets to /sass. I have a main.scss file in /sass which imports bootstrap (@import 'bootstrap';). Finally /sass/main.scss is compiled into /css/main.css. This is my Gruntfile.js:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        'bower-install-simple': {
            prod: {
                options: {
                    production: true
                }
            },
            dev: {
                options: {
                    production: false
                }
            }
        },

        bowercopy: {
            options: {
                srcPrefix: 'bower_components'
            },
            sass: {
                options: {
                    destPrefix: 'sass'
                },
                files: {
                    '_bootstrap.scss': 'bootstrap-sass/assets/stylesheets/_bootstrap.scss',
                    'bootstrap': 'bootstrap-sass/assets/stylesheets/bootstrap/*.scss',
                    'bootstrap/mixins': 'bootstrap-sass/assets/stylesheets/bootstrap/mixins/*.scss'
                }
            },
            ...
        },

        sass: {
            dist: {
                files: {
                    'css/main.css': 'sass/main.scss',
                }
            }
        },

        ...
    });

    grunt.loadNpmTasks('grunt-bower-install-simple');
    grunt.loadNpmTasks('grunt-bowercopy');
    grunt.loadNpmTasks('grunt-contrib-sass');
    ...

    grunt.registerTask('bower', ['bower-install-simple:dev', 'bowercopy']);
    ...
};

So I want to customize bootstrap. For example I want to modify some variables from /sass/bootstrap/_variables.scss and remove some components from /sass/_bootstrap.scss. The problem is when someone else installs packages via Bower and the customized bootstrap is overridden with the default one.

How could I keep my customized bootstrap from being overridden?

Upvotes: 1

Views: 45

Answers (0)

Related Questions