How to import bootstrap-sass to scss file? without compass, without rails, without etc.
I just only have 2 files, .html and .scss (which later will be generated to css).
I know there's a lot questions how to import bootstrap-sass but everything use rails or compass
I already gem install bootstrap-sass, but I don't know what shall I do afterthat
In your .scss file
// Import Bootstrap Compass integration
#import "bootstrap-compass"
// Import custom Bootstrap variables
#import "bootstrap-variables"
// Import Bootstrap for Sass
#import "bootstrap"
make sure you give proper path to your .scss libraries of bootstrap. and the ordering of the inclusion is important.
Related
I have a npm library that I use for styling which uses the following syntax to import scss files. I am not sure what this means and could not find any documentation online. I use grunt with webpack during my build process.
#import '~bourbon/app/assets/stylesheets/bourbon';
#import '~bourbon-neat';
From documentation on a sass-loader#imports project,
webpack provides an advanced mechanism to resolve files. The
sass-loader uses node-sass' custom importer feature to pass all
queries to the webpack resolving engine. Thus you can import your Sass
modules from node_modules. Just prepend them with a ~ to tell webpack
that this is not a relative import
So if you have a file named foo.css and a module foo then you would use ~ if you want to include the module.
Im using Codekit to compile my sass, and Im splitting parts of my website into individual sass files so when it comes to editing I can easily find the file I'm looking for, But I've noticed that when I edit an import I have to go back to the main.sass style sheet and re-save so that it recompiles my changes, my question is, is their a way to automatically compile my main.sass file upon edit of an import ?
Main.sass
#import 'scss_files/_styles.sass'
#import 'scss_files/_service.sass'
#import 'scss_files/_outsource.sass'
#import 'scss_files/_branding.sass'
#import 'scss_files/_wordsearch.sass'
Maybe there is an error. Try to remove the file extensions of your imports (.sass) because in sass there is no need to include the file extension if you are importing a file
I have installed singularity with bower, and am using prepros as a compiler.
Attempting to compile my .scss file returns the following error:
File to import not found or unreadable: singularitygs
At the top of my styles.scss file:
#import "compass/reset";
#import "singularitygs";
config.rb:
require 'singularitygs'
relative_assets = true
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
Additional info (that might be relevant): I am only 'watching' my public folder with Prepros, so config.rb file is at the root of that folder.
Anyone know what the problem may be?
I have now got this working with the following steps:
► Install Ruby gems on my system, and installed singularity
using gems on the command line with:
gems install singularity
► Set Prepros to use system Ruby Installation (as opposed to built-in version) by going to Prepros Options -> Advanced Options -> Use Custom Ruby. (just enter 'ruby' if it's already in your path)
► Import compass, then singularity and breakpoint (the latter needed for responsive grids) in .scss file using:
#import "compass";
#import "singularitygs";
#import "breakpoint";
► Add config.rb file in project root and include the line:
require 'singularitygs'
Now it's all working sweet!
I created a project using yo webapp (with the generator-webapp installed obviously).
Everything is fine, but I'm still missing something. I'm sure it's such an easy answer that I'll never come back to SO because I'll be too embarrassed.
I want to use Compass, which comes out of the box with Yeoman, but I don't know how. I mean, obviously #import "compass...etc" inside any Sass files won't work since inside app/bower_components (the default path for Sass #imports specified inside Gruntfile.js) there's no compass directory.
What should I do now in order to import Compass stylesheets?
You can use compass just as you would usually do. If you set up a vanilla compass project with compass create, there is compass folder either. If you want to use any of the helpers compass ships with, you can import them just as described in the documentation, e.g.
#import "compass/css3";
.mybox {
#include box-shadow(red 2px 2px 10px);
}
main.scss
You would have to install grunt task for compass with npm install grunt-contrib-compass and adjust your Gruntfile.js to add a task for compass compilation.
It may appear not that easy since it has some tricky parts like to compile your sass to .temp/main.css to use for testing/livereload, and then minify it into your dist when doing final build.
The most easy way might be to just try another generator that has compass in a separate directory. For example angular generator has compass and even bootstrap for compass. It's pretty cool.
I have install the compass_twitter_bootstrap. i import it to my scss file like we import compass.
#import "compass";
#import "compass_twitter_bootstrap";
Importing compass is normal but while importing compass_twitter_bootstrap it overwrite all css in compiled css. Means all the css in bootstrap is imported to style.css. I want it to be work like compass file.
I am really noob in this compass and bootstrap. Any help will be greatly appreciated.
You might have to require it in your config.rb
require 'compass_twitter_bootstrap'