SASS compile is breaking form elements with BS 5 Beta 1

[MontyHu]

I've been having this problem for a while, it didn't just start happening with Beta 1 release.

The problem is that when I use Gulp and SASS to compile a custom version of Bootstrap, the resulting CSS file breaks things, mostly form items. Here's an example of using the pre-compiled version of bootstrap.css that comes with the NPM distribution, and then after I do a custom compile with SASS:

Most form elements get broken after the compile. I really don't understand what I'm doing wrong. I'm using the same kind setup and gulp script I used for BS 4, which worked just fine. All I'm changing in my own SCSS file is the primary color, very simple and nothing complex.

If it's any help, this is the gulp file I'm using:

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

// Move the javascript files into our /src/js folder
gulp.task('js', function() {
return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js',
                 'node_modules/bootstrap/dist/js/bootstrap.min.js.map'])
        .pipe(gulp.dest("src/js"))
        .pipe(browserSync.stream());
});

// Static Server + watching scss/html files
gulp.task('serve', gulp.series('sass', function() {
browserSync.init({
        server: "./src"
    });
gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], gulp.series('sass'));
gulp.watch("src/*.html").on('change', browserSync.reload);
}));

gulp.task('default', gulp.parallel('js','serve'));

This is my scss file with the customizations:

$body-color: #444;
$blue: #325aa6 !default;

// Bootstrap SASS Files
@import 'node_modules/bootstrap/scss/bootstrap.scss';

The resulting bootstrap.css file after SASS compile is 7388 lines, whereas the bootstrap.css file that comes with the distribution is 10717 lines. So there's a lot of stuff that seems to be missing, and I'm not sure why, my compile is very basic and straightforward. But I'm really not a SASS or Gulp expert at all, so I have no idea where to even begin to look for the problem.

[MontyHu]

Since posting that message, I've narrowed down the problem. It seems that the following CSS is missing from .form-select and .form-switch in the resulting SASS compile of bootstrap.css:

-webkit-appearance: none;

There is appearance: none after the SASS compile, but -webkit-appearance: none; is missing which is causing the display problem because Safari doesn't recognize it without the prefix. Is this something I can fix? If so, where do I fix it?

[XhmikosR]

https://getbootstrap.com/docs/5.0/getting-started/build-tools/#autoprefixer

BTW autoprefixer is required since v4 when one is building Sass on their own.

[MontyHu]

I have autoprefixer installed in my NPM node_modules folder along with Bootstrap 5 beta 1. But it's still not adding the -webkit- prefix to those form elements after compiling. Is there more that I need to do to make this work?

[MontyHu]

Please disregard my previous post. What I ended up doing was following the Tooling Setup and that seems to have fixed my problem. I was using an older setup where I had a separate .scss file that looked like this:

$body-color: #444;
$blue: #325aa6 !default;

// Bootstrap SASS Files
@import 'node_modules/bootstrap/scss/bootstrap.scss';

And then my Gulp script (posted above) compiled everything. It kept my own customizations separate from the Bootstrap dist files. But when I follow the instructions on the Tooling Setup page, it appears that when I run npm run in the /boostrap folder, I have to directly modify the _variables.scss Bootstrap file which triggers a recompile of all the Bootstrap .css files in the /dist folder. But if I do it this way, when there's another Bootstrap update, this will overwrite the _variables.scss file I modified and I'll lose all those changes.

So I guess I don't understand how the Tooling Setup is supposed to work or how to use it. I know CSS, but I'm a novice with SASS and NPM. If there's a tutorial somewhere I can read that would show me how to use these build tools to create customizations to bootstrap.css while allowing updates and maintaining my edits, I'd appreciate if someone could share a link. So far all the tutorials I found are for Bootstrap 4, but that setup doesn't seem to work with Bootstrap 5, based on my experience.

[XhmikosR]

I believe you have misunderstood the tooling setup. The Tooling setup page only mentions the hard requirements and one way we do things ourselves so that contributors can start easily.

You shouldn't follow that page. Instead, have a look at https://getbootstrap.com/docs/5.0/customize/overview/ and adapt things to your tooling.

[MontyHu]

Okay, then I guess my post about the autoprefixer is back on the table. I already have a setup similar to that outlined on the Customize page, and have autoprefixer installed in my node_modules folder, but when I compile with SASS the prefixes are still missing from appearance in those form elements I mentioned in my first post.

[XhmikosR]

Yeah, that's something on your side. If you have a .browserslistrc file in your root folder, it should work otherwise you might need to customize your setup further.

[MontyHu]

When you say root folder, do you mean the /bootstrap folder within node_modules, or the folder where my customizations are located? I'm really confused about all this, as you can probably tell. I didn't have this issue with BS4, and I'm using the same setup, so, not sure what has changed or how to fix it.

[XhmikosR]

The root folder of your project. Nothing is node_modules matters, or should matter.

We haven't really changed anything in this regard on v5.

[MontyHu]

I put a copy of .browserslistrc in the root of my project folder, but the -webkit- prefixes are still missing after compiling. I guess I'm in over my head, something that seems so simple just won't work for me.

It would be great if the docs could contain a step-by-step tutorial on how to set the whole environment up with npm and how to customize bootstrap with sass and gulp. I'm using the same setup I did for BS4, but it doesn't work with BS5.

[XhmikosR]

Please create a test repo with the minimum dependencies and code and I'll try and have a look tomorrow.

…

On Tue, Dec 8, 2020, 22:43 MontyHu ***@***.***> wrote: I put a copy of .browserslistrc in the root of my project folder, but the -webkit- prefixes are still missing after compiling. I guess I'm in over my head, something that seems so simple just won't work for me. It would be great if the docs could contain a step-by-step tutorial on how to set the whole environment up with npm and how to customize bootstrap with sass and gulp. I'm using the same setup I did for BS4, but it doesn't work with BS5. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#32369 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACVLNKX4LUFAZOUCGOV6UTST2FXPANCNFSM4URBGG4Q> .

[MontyHu]

I'm not sure if I did it properly, but, I created a repo and invited you as a collaborator. I had to remove a lot of files from node_modules and bootstrap to upload it, but, the files related to my project are there. Let me know if I should give you access in a different way. The repo is currently set as private. Thanks.

[MontyHu]

Let me ask you this. Where should I put .browserlistrc if this is my folder structure:

project
├── gulpfile.js
├── package-lock.json
├── package.json
├── node_modules
│   ├── @popperjs
│   ├── autoprefixer
│   └── bootstrap
└── src
    ├── css
    │   └── custom.css
    ├── index.html
    └── scss
        └── custom.scss

There are many other folders in node_modules than listed here. I have tried putting .browserlistrc in the root /project folder, /src, /src/css, /src/scss, and node_modules. After I compile, there are no prefixes added to anything in the resulting .css file. This is my gulp.js file:

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src('src/scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

// Static Server + watching scss/html files
gulp.task('serve', gulp.series('sass', function() {
browserSync.init({
        server: "./src"
    });
gulp.watch('src/scss/*.scss', gulp.series('sass'));
gulp.watch("src/*.html").on('change', browserSync.reload);
}));

gulp.task('default', gulp.series('serve'));

I also tried adding this to my gulp.js file just above the last line, which I got from the auotprefixer GitHub page, but still not getting any -webkit- prefixes in the compiled css file:

gulp.task('autoprefixer', () => {
  const autoprefixer = require('autoprefixer')
  const sourcemaps = require('gulp-sourcemaps')
  const postcss = require('gulp-postcss')

  return gulp.src('src/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([ autoprefixer() ]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('src/dest'))
});

[XhmikosR]

.browserslistrc should be in the root as I said:

project
├── .browserslistrc
├── gulpfile.js
├── package-lock.json
├── package.json

Now, the contents of your .browserslistrc file matter too. If you use our file and everything works fine in your tooling, then you should get the prefixed appearance property in your dist directory.

It's not Bootstrap that needs these tools only. These tools are needed for modern development.

PS. no need to make your test project private. There's nothing to hide. Also, definitely don't commit your node_modules. You are not supposed to touch this folder EVER.

[XhmikosR]

So, I pushed a couple of quick fixes and everything is fine. You should really read more about the tools you are using and how to use them properly. This has nothing to do with Bootstrap.

[MontyHu]

Thank you for taking the time to help me with this, I truly appreciate it.

You should really read more about the tools you are using and how to use them properly. This has nothing to do with Bootstrap.

Ouch! You're not wrong, but, please realize that these are not tools I use, they are tools Bootstrap uses and I am trying to figure them all out just so I can customize a few things in the framework. I'm a graphic designer who created my first website in 1995 before HTML had tables. CSS came along a year later, and I began learning that. I hand-coded every website I created ever since. I've tried some other frameworks, but IMO they add unnecessary layers of complexity that shield you from the actual code that makes things work. Bootstrap is the first framework that has intrigued me, so I decided to use it for a web project a few years ago. I starting learning LESS then Bootstrap decided to drop that in favor of SASS.

I don't use SASS, NPM, Node.js or Gulp for any of my other projects because I prefer to write the HTML, CSS, Javascript and PHP code I need to make my websites work without frameworks. You may think that's old-fashioned or foolish, but that's how I prefer to work. So I'm trying my best to wrap my head around having to learn 3 new tools just to customize a few colors in a framework, and the learning curve is pretty steep for me. Maybe because I'm old and my brain isn't as nimble as it once was.

Bootstrap is a great CSS framework. I'm sure it saves a lot of time for many people, but for me I've spent more time trying to learn SASS, NPM and Gulp than writing actual code. But I'm trying and needed some help with this one aspect of the missing webkit prefixes that i spent close to week trying to figure out without any luck. So I'm thankful for your help.

FYI, my SASS/NPM/Gulp setup was based on a few online tutorials I found on how to customize Bootstrap. Currently the Customization section in the Bootstrap docs is more general in nature and assumes expertise in a lot of areas that not everyone has. A few official, step-by-step tutorials on how to correctly set up a basic environment that allows people like me to customize Bootstrap would be incredibly helpful.

[lorvent]

If you are not comfortable with sass, gulp and all... you should have used their online tool to customize colors, fonts, spacing etc and get the custom css.

that way you should have saved time.

[MontyHu]

Does that exist? I know they had an online customizing tool for Bootstrap 3, but I thought they stopped updating it. Does one exist for BS 5?

[XhmikosR]

An "official" solution doesn't exist for v4 and v5. We had a project from a team member but it's not up to date.

Generally, the issue you are having is not an issue with bootstrap. We document one basic solution, we cannot document all the possible tooling solutions.

[lorvent]

Hello,

i can find this online http://www.bootstrapcustomizer.com/bootstrap/5.0.0-Alpha-3/ but unfortunately they didn't update for v5 beta1 yet.

you can ping them (or they are already developing it for beta 1)