Feature Request: Include SCSS files in build

I’d like to customise the styles of this package and thus include the SCSS files into my build process. Unfortunately, only compiled CSS files are included. It would be great if the SCSS files would be there as well, just as in the bootstrap 4 package. I solved this via including the package as a git submodule, but this is not optimal, as I would like to control its version centrally via package.json.

It would also be cool if the SCSS were prepared for customisation, i.e. by using variables instead of fixed values. Also for this, the bootstrap 4 package is a good reference.

[derwaldgeist]

Hi @ericgio Thanks a lot for your fast response!

Yes, overriding CSS is of course possible, but not as elegant as including the SCSS files directly.

Here is how it works for Bootstrap (and other libraries):

• Bootstrap sets up variables that control the whole visual appearance of the components. You can see this here: https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss
• All variables have the !default flag. This means: If another SCSS file has already defined them, the corresponding values in the Bootstrap variables file will be ignored.
• All other SCSS files of Bootstrap import the _variables.scss file to use these variables instead of hard-coded values.
• This allows you to include your own SCSS file (setting values for some of these variables) before you import the Bootstrap SCSS files and thus “override” the variables you want to tweak.
• For instance, it only takes only one line in SCSS to re-define the $primary color of the Bootstrap theme. All the rest of Bootstrap will then use the new color instead of the default one (blue). Bootstrap even calculates colors that depend on that, e.g. a lighter version of the primary color, a shadow etc.

So, the files will be imported like this:

@import "./path/to/my/own/variables";
@import "./path/to/bootstrap/bootstrap"; // which imports its own `_variables.scss`

To enable this, two things are required:

• The package should use variables in the SCSS files instead of hard-coded values, where appropriate.
• The SCSS files have to be part of the distribution package. This allows consumers of your package to set own variables and then import the SCSS version instead of CSS.
• A bundler like webpack (or Meteor in my case) then transpiles everything to CSS.

Hope my description is clear enough. If not, don’t hesitate to reach out again 😃

[ericgio]

As of v4.0.0-rc.2 I’ve included the bare .scss files with the package (in the /css dir along with the previously available styles). The files are still specifying values directly rather than using variables, so not sure how helpful they’ll be for the use case described above. If anyone wants to help move this issue forward by submitting a pull request, I’d welcome that.