Bootstrap: BS4 custom.scss issue

[ray73864]

I must be the thickest person around.

Anyway, i'm trying to compile a slightly customised version of BS4, in this instance, number of columns/gutter size and form-control focus background colour.

I am using the source-download (using the instructions found in "Tool Setup" for windows, everything is working perfectly in that regard).

I went into my 'bootstrap' directory (the one that has node-modules, dist, scss, docs, etc...), shift-right clicked and chose 'Open Powershell window here' so that I could run the npm stuff, the environment is all set up and working, I can run 'npm run dist' and it creates all the css/min-css/js/min-js files in "dist".

I then went to follow the instructions for creating a custom.scss, I created that file in bootstrap/scss, imported all the optional stuff (the 'Theming' documentation has node_modules/bootstrap/scss which doesn't exist in my directory structure) so I changed it to match the bootstrap.scss file.

Changed $grid-columns, $grid-gutter-width, and $input-bg (I put these lines in before the import lines), re-ran 'npm run dist', checked the new bootstrap.css file and found it doesn't have my change for .form-control:focus in it.

I feel like i'm missing something, probably something minor.

If I make the change in _variables.scss and run 'npm run dist' it all works properly.

[ray73864]

Fired up a brand new Debian 9.3 VM, installed everything necessary, downloaded the source ZIP file, extracted it, ran 'npm install', everything installed fine (much better than on Windows), created a custom.scss file in /root/bootstrap/scss, added in my custom stuff, ran 'npm run dist', all created with no issues, checked /root/bootstrap/dist/css/bootstrap.css, still have none of my custom stuff in there.

My custom.scss file contains the following:

// Custom.scss
// Option B: Include parts of Bootstrap

// Override grid columns
$grid-columns:                48;
$grid-gutter-width:           8px;

// Override form-control focus colour, it needs to be lightblue!
$input-bg:                    "lightblue";

// Required
@import "functions";
@import "variables";
@import "mixins";
@import "grid";

[ray73864]

Took the double quotes away from "lightblue", re-ran 'npm run dist', it errored out saying it didn't know what it was, so it is at least seeing the custom.scss file, it just doesn't appear to be doing much with it.

[C-Lodder]

Are you importing custom.scss before variables.scss? If so, then your varriables will be overriden, assuming the names are the same

[ray73864]

Importing custom.scss? I'm just doing what the 'Theming' page says to do 'https://getbootstrap.com/docs/4.0/getting-started/theming/'.

Though I don't have my directory structure set out like it shows because BS4 is the only NPM project thingy that I have (I didn't install BS4 from NPM, I simply downloaded the v4.0.0.zip file from github and extracted it, then made sure my node.js/Ruby environment was set up so that I could compile it).

My directory structure is basically '/root/bootstrap', all I want to do is customise a couple of things from BS4 without editing _variables.scss and the re-run 'npm run dist' so that my changes get compiled and I get a new .min.css and .min.js file that I can copy/paste to the webserver.

If I have to, I will just go back to changing _variables.scss, only reason I didn't want to have to do that was for in the future when a new BS4 patch comes out (such as the 4.1 that is currently being worked on).

The website is a point of sale system for the company I work for (so that our stores can sell to our trade customers), a long time ago it was decided that we would use some software that was created for the DB that we use, what it meant though was that all HTML files have to be stored in the database as this software pulls them out when a page is requested.

What it means though is that I can't use Angular or any of those fancy new concepts because a page request isn't a request for an HTML file it is a request for a Web-Object (basically a controller) which then determines the correct HTML file to pull out of the DB and show on screen (after internal markups are processed).

Which is why I have my directory structure set up the way I do, but hey, if the only option I am left with is changing _variables.scss then so be it, I was just hoping with BS4's new customisability that it was just a simple process of dumping a custom.scss file into bootstrap/scss and then hey presto it would work, if this is not possible, then the documentation should really be updated to reflect this.

[andresgalante]

Hi @ray73864 the guide is correct, please read https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

If the guide is not clear enough, it'd be great if you could send a PR to improve it based on your struggles.

The trick, as @C-Lodder mentions, is to load your variables before bootstrap. that's how SASS works.

[ray73864]

That is how I have my custom.scss set up though.

My custom.scss is set up exactly as follows (as suggested by https://getbootstrap.com/docs/4.0/getting-started/theming/#importing):

// Custom.scss
// Option B: Include parts of Bootstrap

// Override grid columns
$grid-columns:                48;
$grid-gutter-width:           8px;

// Override form-control focus colour, it needs to be lightblue!
$input-bg:                    "lightblue";

// Required
@import "functions";
@import "variables";
@import "mixins";
@import "grid";

I placed my custom.scss into the same location as all the other Bootstrap 4 scss files (/root/bootstrap/scss), run 'npm run dist' but it never does anything.

What I can see is that under 'importing', it gives me 2 options, Option A is to just import all of Bootstrap's variables, etc... and Option B is to only import what I wish to change.

I am only choosing to change 3 things, all of which are in _variables.scss (Which I assume is being imported by @import "variables"?)

However, looking at the 'variable defaults' section, it shows the import as being 'Option A' (Import the entire of bootstrap), these 2 sections seem to contradict each other, the first section suggests that Option B is the right way to go, however the second section suggests that 'Option A' is the only viable option.

bootstrap.scss is just a file containing a whole lot of imports and nothing else.

Am I to ignore the fact that there are 2 possible ways? (Option A, and Option B), and just go with the 'Option A' method of importing the entire of bootstrap via bootstrap.scss?

This is my first time using SASS (I am a SASS virgin basically) and it is the only project I will ever need that uses SASS, so I'm finding a lot of it rather difficult (even though I have a need to customise a few things, especially the number of grid columns).

Also, I would do a PR, but to do a PR I would need to figure out why the documentation is unclear in the first place, to me, it seems like the documentation is fine but the SASS setup is wrong, but then, as said, I know nothing of SASS so can't make that judgement call.

[andresgalante]

If you need all of bootstrap the easier way to do it is like to create an scss file, let's call it app.scss where you'll import bootstrap.scss and _your-styles.scss:

@import "_your-styles";

Include all of Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";

Then compile app.scss to generate a app.css file that you'll use on your app.

[mdo]

Point of clarification @ray73864—are you trying to compile your custom.scss file with our build tools that are in this repository?

[ray73864]

I am, yes, all I want to do is a minor customisation to BS4 without changing any BS4 files.
The only use I have for SASS is to compile BS4.

[mdo]

If you're using our build tooling, you'll need to modify it to build your own custom Sass file. See the scripts section in package.json, specifically the css-compile task at https://github.com/twbs/bootstrap/blob/9057d8da164bed683f49d30c6414753dad41de3e/package.json#L24. You'll need to change or add your custom.scss there.

[ray73864]

Ahh OK, I figured since the Theming page said that a custom.scss should be created so that you don't have to modify the BS4 stuff that it wouldn't be necessary to do that.

If I have to alter the package.json file, then it would be just as easy to modify _variables.scss directly.

[wolfy1339]

I would just not touch vendors files.
Copy the script over to your package.json after editing it like mdo said and using a _custom.scss.
That way if bootstrap releases a new version, you won't have to re-apply the changes to either package.json or _variables.scss

[ray73864]

I'm still at a complete loss on this one.

I don't have my own package.json file, and looking at the Bootstrap 4 one, it looks like something out of a scary movie :(

I assume I would just create a directory structure such as: /root/bs4themes
Then inside that directory have my own custom.scss file, a simplified package.json, and the bootstrap4 directory?

I don't even understand where in css-compile i'm supposed to put custom.scss

[rik26]

Hi,

Sorry guys, but customizing bs4 is a real pain in the ass.

Most tutorials are for bs4 alpha et beta. The nodejs way isn't really clear. There seems to be dozen of different explanation over the web.... and i'm lost right now.

I also tried to download the zip add a custom.scss. But the doc doesn't tell what to do to recompile : https://getbootstrap.com/docs/4.0/getting-started/theming

Maybe it's obvious to you because you wrote all the code, but for someone discovering the whole thing, it's really hard / esoteric.

Hope you won't get mad at me and just explain the whole process clearly.

[andresgalante]

@mmbpeople since custom.scss is importing bootstrap, then by compiling custom.scss into custom.css you'll get bootstrap + your things.

Maybe you are right and we need better guides. This will requiere an explanation of tooling, set up, etc. I don't know what is out of scope in this case.

[ThomasNucleus]

I'm having similar issues with @mmbpeople in regards to understanding the documentation and figuring out the best way to compile bootstrap with custom changes.

I don't have a node project, so all I'm using node for is to compile Bootstrap to include my custom changes.

My directory is like this:

my-project/
│
└── scss
│....└── custom.scss
│....└── custom-variables.scss
│
└── vendor
│...└── twbs
│ ........└── bootstrap
│
└── webroot
....└── css
....└── js

My custom-variables.scss file has the Bootstrap variables I've changed.

custom.scss imports my custom-variables.scss and bootstrap,scss:

@import "custom-variables";
@import "../vendor/twbs/bootstrap/scss/bootstrap";

I'm including my custom scss files outside the vendor folder so they are version controlled. The Bootstrap vendor source was retrieved using Composer.

The remaining issues are:

1. I have to edit package.json and change where it says 'scss/bootstrap.scss' (in css-compile) to '../../../scss/custom.scss' so it builds with my changes. This really isn't ideal since it's a change to a bootstrap source file, which isn't version controlled in the vendor directory. How else can I build Bootstrap with my custom.scss file?

2. Similar to 1. I want to change where the dist files are outputted. At the moment the compiled contents go into the vendor/twbs/bootstrap/dist directory. It would be better to have them outputted into my webroot directory. Yes I can change the output directories in the package.json file, but again this is a bootstrap source file, which isn't being tracked in my repo.

So I guess what I'm after is a way to customise the build process of Bootstrap that I can version track.

The documentation doesn't really touch on how to build Bootstrap with your custom changes at all.

[wolfy1339]

Please read previous comments.
You don't need to change anything in Bootstrap's package.json
Make a package.json file, then use this template, then copy the scripts section from Bootstrap's package.json and apply the changes you've made

[ThomasNucleus]

@wolfy1339, so this is how I understand it, and my progress:

1. Make a copy of package.json and put it in my scss directory
2. Run npm install
3. Change every directory in package.json so it properly references the bootstrap source files needed for building, and my own changes

The problem I have is with changing the directories. Running into a lot of problems while trying to 'npm run dist'. If I miss a directory change or do it incorrectly I cop a massive error in my vagrant machine. Disk usage ramps up to 100% and I have to relaunch the machine. I'll keep going but surely there another way that's much easier.

[ray73864]

@ThomasNucleus I have to agree, that's a lot of directory changes one has to do, I'm pretty sure it's extremely easy to miss one.

I'm not even entirely sure which ones I am supposed to change and which ones I'm not. Some of them look obvious, others you just can't tell.

When the help page was talking about customising it, I was just expecting to be able to drop a custom.scss file into bootstrap/scss, run 'npm run dist' and hey presto BS4's package.json thingy would auto-detect that I had a custom file in there and go with it.

What I've basically decided on doing right now (because it is the easier way so far) is having a separate directory for each 'theme' that I need (right now I need a light and a dark one), changing _variables.scss to suit, running 'npm run dist', then renaming the resultant bootstrap.min.css file to 'bootstrap-light.min.css' and 'bootstrap-dark.min.css'.

Obviously it's not the right way, but it is the most simplest unless someone can give an 'Idiots Guide to Customising Bootstrap 4'.

I tried searching on the net, but most guides I found are for earlier versions of BS4, some talked about an _custom.scss, others talked about a custom.scss, and others still talked about a completely different file for customising, it's just a complete mess right now in terms of useful guides for those that only need nodejs to deal with BS4.

[biteater]

As the current documentation does not give any hint of "how to compile your own custom.scss" and the solution to change the package.json is ... not that simple, I solved the problem on my own.

I used the standard downloaded version of bootstrap 4.
I changed the scss/bootstrap.scss and added one single instruction at the beginning of the file:
@import "custom";

That feels like cheating and certainly is not ideal, but it requires the modification of a single file only and is simple to restore after an update.

[ray73864]

@biteater I can't believe I didn't think of that method. Certainly easier than going through a very long _variables.scss file

[ray73864]

Hrmm, adding my custom.scss to the top of bootstrap.scss didn't work either.

If I add it to the top of the file, I get my changes to the number of grids, I get my theme colours, but I don't have any of the other colours.

If I add it to the bottom of the file, I get my grid changes but nothing else.

I think i'm just going to go back to modifying _variables.scss, so far it is the only thing that has actually worked for me.

[browner12]

If you want to fully customize BS4, but also have access to its existing variables and functions, you cannot use bootstrap.scss. You need to take (copy) the contents of bootstrap.scss, and place your customizations in the appropriate location. Usually this means between @import "mixins" and @import "root"

[ddn]

I stumbled here, finally finding a workable solution in @biteater's suggestion of adding the import of custom at the top of bootstrap.scss

I have to +1 "Most tutorials are for bs4 alpha et beta. The nodejs way isn't really clear. There seems to be dozen of different explanation over the web.... and i'm lost right now."

The documentation for "theming" is stunningly bad, making enormous leaps and assumptions that someone will be able to piece together things they would have to already know to get a custom bootstrap built. I'd like to offer a PR, but I don't understand it beyond knowing that the kludge of adding the custom import works great.

[ray73864]

@ddn my problem was that I tried that, but I needed to update things that required access to the different maps (for colours, etc...) and trying to change/add before they got imported by _variables.scss just caused the sass compiler to complain and die.

Right now my method is to basically have multiple folders for each theme that I want (in this case a light and dark theme) and then edit the _variables.scss file, recompile, copy the dist/bootstrap.min.css file to the webserver (since my webserver is too old to work with the version of node.js required) and rename it to bs4-(dark/light).min.css.

[apiweb]

I'm also having the same difficulty.
I think it would be interesting, if it came by default, a custom.scss (empty) file, but already configured for compilation.
So a user who is starting up on Bootstrap customization would already have a starting point for change.

[XhmikosR]

The docs should cover all this already.

https://getbootstrap.com/docs/4.1/getting-started/theming/

[ray73864]

They don't though, and as is evidenced by a few people commenting here, the documentation makes no mention of how to make a custom.scss file work.

I've basically had to resort to just having several directories for BS4, each with various modifications to _variables.scss as the helpfile provides no help at all in this case.

It MAY help people who know and use SASS for other projects, but for someone who just wants to customise bootstrap4 itself it provides little help.

Though because I have to edit _variables.scss, I am basically stuck on Bootstrap 4.0, unable to really move up to another version until I notate what changes I made.

[XhmikosR]

If you think the docs don't cover your case, you are welcome to make a PR. This issue is from the time we didn't explain it like we do right now.

[ray73864]

I'm not entirely sure how I could make a PR to begin with. I simply don't understand how to do it and lack the time to try and work it out.

And near as I can tell, the documentation for 'Theming' in 4.1 is identical to what it was in 4.0 when I first created this issue.

By closing the issue, you've effectively said 'we don't care about how bad the documentation is', as it now hides the issue from people who could potentially fix it up to help people like me.

[XhmikosR]

Well, I need to clean up the issues at some point and yeah this is a no issue to my understanding.

Like I said, instead of spending time writing all this you could just edit the doc file to make your suggestion.

So, if your problem is having the issue open, let's open it again and I'll wait for PRs.

[Joebayld]

I managed to get a custom scss file to work per the documentation. Where I struggle is how to compile to a CSS file... It compiles and 'works', but the Autoprefixer isn't working as expected.

For example:
The .custom-select should set the css of appearance to none. In the bootstrap /dist, it looks like the following: -webkit-appearance: none; -moz-appearance: none; appearance: none;, but when I compile in my project, I only get appearance: none;.

Is there any steps available for how to properly compile a custom theme? Does it involve the postCSS loader?

[ray73864]

I've been using theme-kit lately, it's made things a little bit simpler as I couldn't get my head around how to make it work at all when looking at the BS4 documentation.

[tiesont]

FWIW, I do think that the method shown in the docs is correct, with respect to how the custom Sass file should be written. For instance, this is my app.scss file:

$font-size-base: 0.875rem;
$enable-gradients: true;

@import 'colors.scss';
@import "../lib/bootstrap/scss/bootstrap";

I get my slightly smaller text, gradients, and some color overrides, no sweat. I _think_ the issue most people get stuck on is how to get their custom file compiled. I'm lucky in that I code in Visual Studio, so all I have to do is install the Web Compiler extension, add a compilerconfig.json file, and the extension does all the work for me. Easy-peezy, lemon-squeezy.

So, would it be fair to say that what most people are really asking for is some guidance on how to setup Sass compilation in their chosen framework? Would that be on-topic? If so, could we establish some sort of checklist/wish-list for which frameworks are worth the effort, and whether that belongs in the docs or as wiki entries here on Github?