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.
Related
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.
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.
styles.scss
#import 'packages/bulma.sass';
bulma.sass
#charset "utf-8"
/*! bulma.io v0.6.1 | MIT License | github.com/jgthms/bulma */
#import "sass/utilities/_all"
#import "sass/base/_all"
#import "sass/elements/_all"
#import "sass/components/_all"
#import "sass/grid/_all"
#import "sass/layout/_all"
terminal
'Error: client/packages/bulma.sass.scss doesn\'t exist!
Is it possible to import SASS into a SCSS file? What is the best way to install bulma into a scss env.
I also tried #import 'packages/bulma' and get client/packages/bulma.scss doesn\'t exist!.
tl;dr can you try removing the .sass extension?
#import 'packages/bulma';
More detailed answer from this post:
The Sass #import directive extends the CSS #import rule so that it works with .scss and .sass files. It imports the file referenced and any variables or mixins that are defined in the imported file so they can be used in the main file.
#import "typography.scss";
Assuming there’s a file typography.scss in the current directory, the contents of typography.scss will replace the #import statement.
Sass makes it even simpler. If you forget to include the extension, it will look for a file with the same name and either a .scss or .sass extension.
#import "typography";
The statement above would find either typography.scss or typography.sass in the same directory as the file importing the typography styles.
#Hector is right, just wanted to add some other things.
What is valid is covered by the language docs https://sass-lang.com/documentation/file.SASS_REFERENCE.html#import so the double import might be a node-sass bug, but the extension behaviour is going to warn in the next version of Sass AFAIK. Libsass runs through a sass2scss library to transpile the "unsupported" old .sass to .scss.
Remove the leading _ from the imports, those aren't valid
use #import "../node_modules/bulma/bulma.sass"; instead of #import 'packages/bulma.sass';
It will not throw any error. For more information, you can go through this link
My Rails 4.2 now uses many Sass variables, and it was switched from relying on sprockets require statements to Sass #import statements. It now has 2 issues in development:
Pages may load a little slower
When I refresh a page, CSS changes don't always show up, so I need to open the page in a new tab.
How can I fix this?
application.css:
*= require_self
*= require main.scss
main.scss:
#import "bootstrap";
#import "base/variables.scss";
#import "styles/home.scss";
#import "styles/pages.scss";
//remaining CSS pages
_home.scss:
/* various styles, no import statement */
_variables.scss:
$color-red: #F23C3A;
//...
One thing I would look at would be removing the file extensions of your Sass imports, and also renaming application.css to application.scss so the file knows it will be precompiling Sass to CSS.
application.scss
#import "main";
main.scss
#import "base/variables";
#import "styles/home";
#import "styles/pages";
If you are using Bootstrap Sass their documentation walks through setting up your file structure to include Sass in your project.
In your config/environments/development.rb, ensure that it includes
config.cache_classes = false
This way, all assets and code will be reloaded each time the page is refreshed. You will usually only need to reload the server after a migration.
Is it possible to prevent SASS from merging files included via #import?
For development, i would like to maintain the references of the original CSS (in my setup compiled from SASS already).
The docs for the #import rule says that:
All imported SCSS and Sass files will be merged together into a single CSS output file.
And explain that there is some circumstances under which it will compile to a CSS #import rule:
If the file's extension is .css.
If the filename begins with http://.
If the filename is a url().
If the #import has any media queries.
The following rules will tell SASS to merge imported files:
#import "foo.scss";
#import "foo";
The following rules will tell SASS to NOT merge imported files:
#import "foo.css";
#import "foo" screen;
#import "http://foo.com/bar";
#import url(foo);