Reputation: 465
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