I have updated my project from Bootstrap 4.5 to Bootstrap 5. I did this by simply overwriting all the old bootstrap files with npm install bootstrap#next. Now I have the problem that I can't use the bootstrap utilities anymore. They just don't seem to be compiled into the stylesheet, even though they are imported.
My app.scss file:
#import "variables";
#import "../node_modules/bootstrap/scss/functions";
#import "../node_modules/bootstrap/scss/variables";
#import "../node_modules/bootstrap/scss/mixins";
#import "../node_modules/bootstrap/scss/grid";
#import "../node_modules/bootstrap/scss/utilities";
For example, if I now try to hide in element with .d-none, then this has no effect. The compiled stylesheet also does not contain a utility class.
There is a change in file structure in BS5 (vs. BS4).
The _utilities.scss file now only creates a variable $utilities holding all the ... utilities.
Another file utilities\_api.scss, when compiled, generates the utility CSS.
For your case use:
#import "../node_modules/bootstrap/scss/utilities";
#import "../node_modules/bootstrap/scss/utilities/api";
Make sure to read the docs on how the API works.
Do what they say in Bootstrap doc.
#import "../bootstrap/scss/functions";
#import "../bootstrap/scss/variables";
#import "../bootstrap/scss/utilities";
$utilities: map-merge(
$utilities, (
"border": map-merge(
map-get($utilities, "border"),
( responsive: true ), ),
)
);
#import "../bootstrap/scss/bootstrap";
always place your utilities before the bootstrap imported. and import the three files where also bootstrap mentioned in API.
In the last update you should use like this:
// Here is some overrided bootstrap variables.
#import "~bootstrap/scss/functions";
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/maps";
#import "~bootstrap/scss/utilities";
// You can edit utilities here. Explained here https://getbootstrap.com/docs/5.0/utilities/api/#using-the-api
#import "~bootstrap/scss/utilities/api";
Also you can see tru order in the main bootstrap.scss file.
Related
I have a Problem when running npm run prod on a Laravel, VueJS APP.
#npm run dev works well but prod say's:
ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
JisonLexerError: Lexical error on line 1: Unrecognized text.
Erroneous area:
1: none - 1px
^..^
at /Users/*/Work/*/resources/sass/app.scss:3801:3
at Object.parseError (/Users/*/Work/*/node_modules/postcss-calc/dist/parser.js:1200:15)
at Object.lexer_parseError [as parseError] (/Users/*/Work/*/node_modules/postcss-calc/dist/parser.js:2333:44)
at Object.lexer_next [as next] (/Users/*/Work/*/node_modules/postcss-calc/dist/parser.js:3328:22)
Is there a way to get more output from npm by processing to find the line of code which is affected here? When I google, I can only find this error in old Bootsrap Versions like 4.* but that seems not the same solution here. On the Bootstrap side, they want me to get them debugging output so that they can be shure it came from bootstrap not my setup.
I use bootstrap like this in my scss files:
app.scss:
#charset "UTF-8";
#use "sass:math";
// 1. Utils/Abstracts - variables, functions, mixins
#import "utils/variables";
#import "utils/mixins";
#import "utils/functions";
// 2. Vendors
#import "vendors/bootstrap/bootstrap";
#import "vendors/bootstrap/bootstrapicons";
after this came my own CSS stuff...
The bootstrap file looks like this:
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
#import "~bootstrap/scss/functions";
// 2. Include any !default variable overrides for Bootstrap here
#import "./variables";
// 3. Include remainder of required Bootstrap stylesheets
#import "~bootstrap/scss/variables";
#import "~bootstrap/scss/mixins";
#import "~bootstrap/scss/utilities";
// 4. Include any optional Bootstrap CSS as needed
#import "~bootstrap/scss/root";
#import "~bootstrap/scss/reboot";
#import "~bootstrap/scss/type";
#import "~bootstrap/scss/images";
#import "~bootstrap/scss/containers";
#import "~bootstrap/scss/grid";
//#import "~bootstrap/scss/tables";
//#import "~bootstrap/scss/nav";
//#import "~bootstrap/scss/navbar";
#import "~bootstrap/scss/forms";
#import "~bootstrap/scss/placeholders";
#import "~bootstrap/scss/buttons";
#import "~bootstrap/scss/button-group";
#import "~bootstrap/scss/dropdown";
#import "~bootstrap/scss/modal";
#import "~bootstrap/scss/close";
#import "~bootstrap/scss/transitions";
#import "~bootstrap/scss/list-group";
#import "~bootstrap/scss/breadcrumb";
#import "~bootstrap/scss/alert";
#import "~bootstrap/scss/toasts";
#import "~bootstrap/scss/progress";
#import "~bootstrap/scss/badge";
#import "~bootstrap/scss/tooltip";
#import "~bootstrap/scss/popover";
#import "~bootstrap/scss/spinners";
#import "~bootstrap/scss/offcanvas";
#import "~bootstrap/scss/card";
#import "~bootstrap/scss/accordion";
#import "~bootstrap/scss/carousel";
#import "~bootstrap/scss/pagination";
#import "~bootstrap/scss/helpers";
// overwrite and extend some utilities
#import "./utilities";
// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
#import "~bootstrap/scss/utilities/api";
// 6. Add additional custom code here
// the project code needs to be placed after this
Maybe it is clearly if there is a more detailed debugging output if I ran. npm run prod, to find the problem and solve it.
Thanks for each Hint you gave me.
Marcel
Right now I have all the unmodified bootstrap files a copy of those files for customization.
These folders:
--> Bootstrap
--> Custom (copy of the above)
I first include boostrap files and then the custom files, which right now are an exact copy.
Let's say I start changing values in "Custom" in order to get the desired looks. Then I update boostrap to a new version, by updating the bootstrap folder. A lot of changes might not come through since the previous version is basically copied to "Custom" even if the css rules haven't been changed at all.
Is this the correct way to do it, or should I try a different approach?
There are 2 ways to do this
First i need to understand you project folder struture i would reccomend this
dist
-/css
-/styles.css
src
-/scss
-styles.scss
-/bootstrap
-bootstrap.scss (taken from the scss folder)
-_variables.scss (taken from the scss folder)
Using this stucture your project only needs the styles.scss which will import the bootstrap folder below it and then compile into your dist folder to ouput your CSS (i would reccommend webpack or gulp for this if you know how to do thiat)
The main this in that the bootstrap.scss file is set-up like this below (in this example i am using node_modules as i have imported bootstrap using npm into my project. But this is a relative path for where the files live, so make your path to the same files is correct to how you have strutured your project)
Bootstrap.scss
Just notice that the variables file is pointing to the local one, not the one that sits in the main repo folder.
/*!
* Bootstrap v4.2.1 (https://getbootstrap.com/)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
#import "./node_modules/bootstrap/scss/functions";
#import "../bootstrap/_variables.scss";
/*#import "./node_modules/bootstrap/scss/variables.scss";*/
#import "./node_modules/bootstrap/scss/mixins";
#import "./node_modules/bootstrap/scss/root";
#import "./node_modules/bootstrap/scss/reboot";
#import "./node_modules/bootstrap/scss/type";
#import "./node_modules/bootstrap/scss/images";
#import "./node_modules/bootstrap/scss/code";
#import "./node_modules/bootstrap/scss/grid";
#import "./node_modules/bootstrap/scss/tables";
#import "./node_modules/bootstrap/scss/forms";
#import "./node_modules/bootstrap/scss/buttons";
#import "./node_modules/bootstrap/scss/transitions";
#import "./node_modules/bootstrap/scss/dropdown";
#import "./node_modules/bootstrap/scss/button-group";
#import "./node_modules/bootstrap/scss/input-group";
#import "./node_modules/bootstrap/scss/custom-forms";
#import "./node_modules/bootstrap/scss/nav";
#import "./node_modules/bootstrap/scss/navbar";
#import "./node_modules/bootstrap/scss/card";
#import "./node_modules/bootstrap/scss/breadcrumb";
#import "./node_modules/bootstrap/scss/pagination";
#import "./node_modules/bootstrap/scss/badge";
#import "./node_modules/bootstrap/scss/jumbotron";
#import "./node_modules/bootstrap/scss/alert";
#import "./node_modules/bootstrap/scss/progress";
#import "./node_modules/bootstrap/scss/list-group";
#import "./node_modules/bootstrap/scss/close";
#import "./node_modules/bootstrap/scss/toasts";
#import "./node_modules/bootstrap/scss/modal";
#import "./node_modules/bootstrap/scss/tooltip";
#import "./node_modules/bootstrap/scss/popover";
#import "./node_modules/bootstrap/scss/carousel";
#import "./node_modules/bootstrap/scss/spinners";
#import "./node_modules/bootstrap/scss/utilities";
Styles.scss
This is the file that you will need to complie and then that will output your custom CSS
#import 'bootstrap/bootstrap.scss';
the variables file so long as you copied this from the repo version you are using (important as with the various version, if you use the incorrect version then you will get complie errors for variables not being present) You should be able to customise bootstrap colours, breakpoints, cols, rows and much more to get bootstrap the way you want it.
I using scss in my project to import scss files.
For example I have file with variables (that using everywhere in my project)
And I have desktop.scss for importing files into it
Like this
#import 'variables';
#import 'desktop/_style';
#import 'desktop/index';
#import 'desktop/step_1';
#import 'desktop/step_2';
#import 'desktop/step_3';
#import 'desktop/step_4';
According to this issue
Link
It will be deprecated.
But what I can use instead of it?
Any suggestions?
This issue is only about importing CSS into a SCSS file. From your code I assume, that you only use SCSS Files, so you won't have a problem with that in future.
I'm designing a site using Laravel Mix on local. I have lots of scss lifes in resources/assets/sass and through app.scss I combine them it looks just the way it's supposed to be on local using npm run watch and php artisan serve
But when I set the site up on a server, all the css classes are missing, therefore design doesn't implement itself on the website. For instance I have a class future-concerts which styles the element it suggests. So I check for .future-concerts inside public\css\app.css there is no such class. What might be causing this? Even just copying app.css file to the server doesn't work. It just deletes most of the lines I wrote.
app.scss file
// Fonts
#import url('https://fonts.googleapis.com/css?family=Abhaya+Libre|Mitr|Raleway');
// Variables
#import "variables";
#import "custom";
#import "directives";
// Bootstrap
#import "bootstrap.min";
#import "bootstrap-theme.min";
// Fotorama
#import "fotorama";
// Animate.css
#import "animate";
// Font Awesome
#import "font-awesome.min";
webpack.mix.js file:
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I'm install bootstrap gem and follow all direction to change application.css, however when I create another custom .scss file, customizations from the custom file werent included in application.css.scss . I have tried to import boot strap and bootstrap-sprockets to the custom file as well, but no changes were made on the website. How can I make the customizations on the newly created custom.scss file to show on the website.
the application.css.scss file contains only 2 lines
#import "bootstrap-sprockets";
#import "bootstrap";
If I've read your question correctly, you have application.scss, which contains
#import "bootstrap-sprockets";
#import "bootstrap";
and also your custom.scss file, contents of which you want to end up in application.css. You need to add it to your application.scss file, ie -
#import "bootstrap-sprockets";
#import "bootstrap";
#import "custom";
It's also recommended to begin the name of .scss files which you are importing (also known as partials) with an underscore, so in this case custom.scss becomes _custom.scss.
And make sure you recompile the application.scss to application.css so the changes are actually made - I'm not sure what you're using to compile your sass but I think this may be the step you are missing.