Override specific files in Grunt

Question

I have three projects: Proj A which contains a basic setup with files to be reused in many different projects, non editable. And Proj B and C, which uses the files from Proj A as its base. Each project has its own Gruntfile.

I want to customize some JS and SCSS files in Proj B and C, (eg change colours/variables). But know that Proj A might be updated every now and then, so I can't edit any of those basic files as they would be overwritten when pulling the latest changes into B and C. I therefore have to create customised files which should override the files from Proj A.

1)

A way of doing it could be to copy the file I want to edit and simply add 'override' to it's filename:

ui/styles/sass/ _override_colors.scss *(should override ui/styles/sass/_colors.scss)* ui/scripts/ _override_base.js (should override ui/scripts/base.js)

The problem then is: how do I specify this rule in my Gruntfile, "if any file starting with '_override' exists, is should override its equivalent file". That might however not be optional if the file I copy is large, as it means two quite identiacall large files.

2)

One other approach could be to add a new file called _overrides.scss and add it in the very end in my @import file. That however would be a bad idea if I am to change a lot of things, as it might be too messy and big and also means duplicate code (unless I am only overriding variables and no classes).

Which approach would you go for? Are there any other better ways to solve this problem?

Thanks!

web.scss:
@import 'colors';
@import 'grid';
@import 'base';
// @import 'overrides'; ?


grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {
        dev: {
            options: {
                style: 'expanded',
                sourcemap: true,
                quiet: true

            },
            files: {
                'styles/css/web.css':       'styles/sass/web.scss'
            }
        }
    },

    uglify: {
        site: {
            files: {
                'scripts/min/site.js': [
                    'scripts/dev/forms.js'
                    'scripts/dev/base.js'
                ]
            }
        }
    }, ....

Answer 1

I don't think anything should happen at the Gruntfile.js level, as this concerns only SASS .

If you prefer the override way, name the override files as _appB.scss and _appC.scss and add them to the compilation. These files won't get bloated as long as you only do overrides in them .

You might however decide to go the non-override way and create dedicated selectors for each app - which takes some time getting used to but will prove more maintainable in the long run. That way every selector lives a life of its own.

An override example:

_appA.scss (common styles)

.content { height: 80px; max-width: 980px; margin: 0 auto; }

_appB.scss

.content { height: 90px; }

_appC.scss

.content { height: 70px; max-width: 768px; }

markup

<div class="content"></div>

A block/element/modifier "override" example:

_appA.scss (common styles)

.content { height: 80px; max-width: 980px; margin: 0 auto; }

_appB.scss

.content--b { height: 90px; }

_appC.scss

.content--c { height: 70px; max-width: 768px; }

markup

<div class="content content--b"></div>
<div class="content content--c"></div>

The last markup example above is a representation of BEM syntax , which is a popular take on OOCSS .

Me and my colleagues at work maintain complex products and find this workflow very manageable.