I want to use Bootstrap with SASS, but I can't find any tutorials or explanation how one can use Bootstrap with SASS. The only thing I find is installatio trough a ruby gem:
compass create my-new-project -r bootstrap-sass --using bootstrap
Which creates the following tree in my folder:
Is this enough for Bootstrap to use its own Grid, because I don't see the bootstrap.scss file, neither any Grid related files. However, I find the grid classes and all in a styles.css file. Isn't there a bootstrap.scss file that has all the mixins and everything else? And where can I find a more extended use of SASS's Bootstrap mixins, which are described here briefly:
http://www.hongkiat.com/blog/bootstrap-and-sass/
Thank You all in advance! I really can't find nothing on my problem.
(I'm using .sass files in my answer, but it should apply to .scss files, too)
Isn't there a bootstrap.scss file that has all the mixins and everything else?
Yes, there is. Here's the generated styles.sass file:
// Import Bootstrap Compass integration
#import "bootstrap-compass"
// Import custom Bootstrap variables
#import "bootstrap-variables"
// Import Bootstrap for Sass
#import "bootstrap"
bootstap_variables refers to the generated _bootstrap-variables.sass file in your project tree, whereas bootstrap-compass and bootstrap are imported from the gem's stylesheets directory.
The latter imports all other Bootstrap files, including the grid:
// Core variables and mixins
#import "bootstrap/variables";
#import "bootstrap/mixins";
// Reset and dependencies
#import "bootstrap/normalize";
#import "bootstrap/print";
#import "bootstrap/glyphicons";
// Core CSS
#import "bootstrap/scaffolding";
#import "bootstrap/type";
#import "bootstrap/code";
#import "bootstrap/grid"; # <-- here it is
...
Related
I am now creating html project using sass and client requested to use material.io web component. My sass is working fine. I included material.io component through node_modeules folder. But when I tried to access material-components-web.scss like below code
//style.scss file
#import 'layout';
#import 'typo';
#import 'image';
#import 'overwrite';
#import "~material-components-web";
I got this error message in style.css file.
/*
Error: File to import not found or unreadable: ~material-components-web.
Load paths:
/Users/kenvsi/www/static/mycondo/assets/sass
/Applications/Koala.app/Contents/Resources/app.nw/rubygems/gems/compass-core-1.0.1/stylesheets
Compass::SpriteImporter
on line 5 of /Users/kenvsi/www/static/mycondo/assets/sass/style.scss
1: #import 'layout';
2: #import 'typo';
3: #import 'image';
4: #import 'overwrite';
5: #import "~material-components-web";
My question is that I would like to assess all material scss components, variable and function to my custom scss file. Is there any ways to access those material scss options in html project?
i think you miss to include the scss file.
I am using this with webpack for sass compiling.
#import "~material-components-web/material-components-web";
First "material-components-web" is a folder and second is a scss file.
I've set up my own (Bootstrap 3) scss mixins as it is done in Bootstrap itself:
a mixin folder in my scss folder (template). Like this:
-scss (with template.scss)
-- bootstrap
-- template/mixins
linked it in the file template.scss: #import "template/mixins";
Prepros doesn't accept it: "File to import not found or unreadable: template/mixins".
How do I set this up?
Found it. The folder was set up correctly, but the corresponding #import was not. One level too high. #import mixins shouldn't be in template.scss, but in the template folder itself as _mixins.scss
I am trying to customize a Bootstrap 4 alpha 6 theme. I want to copy settings from _variable.scss file to _custom.scss to override. But I didn't find _custom.scss file in source code. How do I add this _custom.scss file in my project?
I noted your issue here, here and here:
☐ Consider implementing a _custom.scss for easier, built-in variable overrides?
So because your Bootstrap 4 didn't ship with a _custom.scss file, you only need to re-create bootstrap/scss/_custom.scss.
Then edit bootstrap/scss/bootstrap.scss to what it's supposed to be:
// Core variables and mixins
#import "variables";
#import "mixins";
#import "custom";
Then follow Customising variables
Bootstrap 4 [supposedly] ships with a _custom.scss file for easy overriding of default variables in /scss/_variables.scss. Copy and paste relevant lines from there into the _custom.scss file, modify the values, and recompile your Sass to change our default values. Be sure to remove the !default flag from override values.
I'm not especially pleased with my current solution, but it simply works as a way to "override" variables in my current Angular implementation of Bootstrap 4.
Create a _custom.scss file in your project
Create a new bootstrap.scss in the project
Copy the contents of bootstrap.scss from Bootstrap to the new file (e.g., node_modules\bootstrap\scss\bootstrap.scss)
Update each import with the correct file location relative to the new bootstrap.scss file
Add an import for your new custom file between variables and mixins
Update wherever you import Bootstrap to reference the newly created bootstrap.scss file
Sample implementation:
Folder structure:
app
└── styles
├── bootstrap.scss
└── _custom.scss
_custom.scss:
// For example, change links to be yellow
$link-color: yellow;
bootstrap.scss contains:
#import "~bootstrap/scss/variables";
#import "custom";
#import "~bootstrap/scss/mixins";
//etc.
app.component.scss (my location for any additional styles outside of Bootstrap):
#import "./styles/bootstrap"; // instead of #import "~bootstrap/scss/bootstrap";
Are you sure you are using the source version of Bootstrap 4 alpha 6? Or haven't deleted _custom.scss by accident?
If you look at the git repo for Boostrap 4 alpha 6, _custom.scss is included.
Trying to build custom workflow with gulp, panini, mustache, sass and one of my problem is including partials from node_modules, here is example from main.scss file:
#import "node_modules/bootstrap/scss/mixins";
#import "settings";
How to avoid typing full path to _mixins.scss?
Your question is similar to this: Sass import not crawling node_modules to find appropriate package
You can include paths by passing the includePaths argument to gulp sass. e.g
.pipe($.sass({
includePaths: ['node_modules/bootstrap/scss/', 'another/path']
})
You can include node_modules in sass pathes:
.pipe(sass({
includePaths: ['node_modules']
})
Then you can import library's sass like this:
#import "bootstrap/scss/bootstrap";
Or, in case of material-components-web:
#import "#material/top-app-bar/mdc-top-app-bar";
This way:
you don't need to add each lib to path
the sub-dependencies imports will work seamlessly, e.g. mdc-top-app-bar in MDC example imports "#material/elevation/mixins".
Use includePaths or you could resolve NPM modules like this:
#import "~bootstrap/scss/mixins";
#import "settings";
There are some libraries for this sass-globbing, but I personally don't like this approach, because in CSS matters on import order.
Best practice is IMHO create some file vendor.scss;
#import "~bootstrap/scss/mixins";
#import "~bourbon/...";
and then import this vendor.scss:
#import "vendor.scss"
#import "partials/..."
For anyone else that stumbles here, if you're using gulp-ruby-sass instead of node-sass you would use
loadPath: ['node_modules/bootstrap/scss/']
instead of
includePaths: ['node_modules/bootstrap/scss/']
I have _header.scss, _footer.scss and _main.scss and I want to combine them all into one and generate style.css.
I know it has to do with file watchers, but I haven't been able to figure out how to combine multiple files into one.
Create file styles.scss that contain this code
#import 'header';
#import 'main';
#import 'footer';
It's not a PHPStorm feature, it's a SASS feature.
In style.scss it should start out with:
#import "_header";
#import "_footer";
#import "_main";
PHPStorm doesn't have to combine the files, Scss does.
#SlawaEremkin above is correct.
Be sure that the import file is named without an underscore (not a SASS partial) otherwise there won't be an output CSS file.
Correct
styles.scss
Incorrect
_styles.scss