Feature Request: Include SCSS files in build

[derwaldgeist]

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.

[ericgio]

Hi @derwaldgeist, thanks for your feature request. Can you please help me better understand how the library CSS is integrated into your project/build process and how you intend on customizing it?

Without knowing more, my instinct would be to recommend simply overriding the library's CSS with your own (S)CSS file. Alternatively, you could just copy the SCSS from the git repo and use that in your project instead of the styles included in the library. Either way, it seems like you're creating a new file with your own SCSS that isn't part of the library and therefore can't really be tracked/updated with npm, but maybe I'm misunderstanding something.

[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]

Thanks @derwaldgeist for the detailed description! This doesn't seem like something I'll be able to get to very soon, but I'd be happy to accept a PR for the change if you're up for it.

[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.

[ericgio]

v5 of the library replaces some values in the SCSS file with variables. I'm going to consider this issue resolved. If anyone has specific ideas regarding how the SCSS should be structured and package, feel free to comment or submit a PR with improvements.