I'm using SASS to load stylesheets in a Rails 3.1(sass-rails 3.1) app. For example, sass partials in app/assets/stylesheets are loaded using #import in application.sass -
#import "pages/common"
#import "pages/**/*"
#import "jquery-ui.css"
Now, I also want to load vendor/assets/stylesheets. Note that I'm not using require vendor, as #import pages/* seems to be the sass recommended way of doing it. Files here will be css, and not sass or scss. I cannot use #import ../../../vendor/assets/stylesheets/* as it works only for sass and scss files.
Is there any way of doing this ?
Update
What I have now is this.
application.css.scss
//= require_tree .
//= require vendor
//= require_self
This includes all the sass partials mentioned above. The require vendor in
vendor/assets/stylesheets/vendor.css looks like
//= require_tree .
A caveat of this approach is that sass mixins(user defined & plugins) and common variables are not available in all partials. What I have now is a _common_imports.sass which I #import first thing in all partials.
common_imports.sass
#import "colors"
#import "compass/css3/gradient"
#import "compass/css3/border-radius"
#import "compass/css3/box-shadow"
Importing common_imports in all partials feels very repetitive.
If I'm understanding you correctly, I think this might help.
Add the following to config/application.rb, inside the class Application < Rails::Application block:
config.sass.load_paths << File.expand_path('../../lib/assets/stylesheets/')
config.sass.load_paths << File.expand_path('../../vendor/assets/stylesheets/')
I've just added the above to an app, and the following directives are now both working:
Import Sass:#import 'grid' in app/assets/stylesheets/application.css.scss finds the file vendor/assets/stylesheets/_grid.scss;
Import regular CSS:#import 'background', again in application.css.scss, finds vendor/assets/stylesheets/background.css.
Does that help? Sorry if I've misunderstood the problem!
Note that you'll need to restart rails if you created any new vendor/* directories (e.g. vendor/stylesheets). If you're seeing this in Rails 3.2 or later, this is probably the most likely culprit.
Try changing the extension to .scss for your vendor stylesheet.
Once I did this, SASS was able to find the required import.
You can use bellow path in order to load assets files from vendor/assets.
Put below line into your application.css file, that will work great.
*= require_tree ../../../vendor/assets/stylesheets/.
same thing can be done for Javascript assets.
Hum, I'd say you're using the asset manager in a strange way.
Everything in app/assets/, lib/assets/ and vendor/assets/* are mapped at the same place in /assets/ so, on the web side, it seems like they're all in the same folder.
What you should do, as you're in rails 3.1 is not use css/sass #import but sprockets require.
You should have at the top of your application.sass :
// require pages/common
// require_tree ./pages
// require jquery-ui
// require_self
so that sprockets put everything in the same file in production and you don't have to load a bunch of files.
When you are using engines, this get more tricky. A quick monkey path is to include the engines vendor path in the SASS_PATH Environment-variable. This is what worked for me in the engine.rb:
ENV['SASS_PATH'] = "#{ENV['SASS_PATH']}:#{File.expand_path('../../vendor/assets/stylesheets/')}"
From that point on, you could always put this into a method to DRY it up when you're including multiple engines in your project.
Related
I have been using #import to pull in external stylesheets (animate.css, for instance) into my main, .scss stylesheets for quite some time.
I now discovered that #import is being deprecated and has been replaced with #use. However, I am unable to find a proper example of the syntax #use is expecting when importing external files.
With #import, I would have something like this:
#import url('../assets/css/animate.css');
The above would go grab the animate.css file in my /assets/css/ directory, and embed it into my main .scss stylesheet.
From the documentation here, https://sass-lang.com/documentation/at-rules/use, I see that #use is expecting modules to be loaded via their namespace, and to create a namespace from an external resource, I should use:
#use '<url>' as <namespace>;
So I tried the following:
#use '../assets/css/animate.css' as animation;
However, that actually causes an error when compiling, and even if it did not, what am I supposed to do with 'animation' once it is a namespace?
Should I just go back to including separate, individual stylesheets in the <head>, or has someone out there figured out how to make #use work in the way I was using #import before?
I'm trying to make my SCSS files more modular by splitting it into individual partial files. It's all well until suddenly I have a bunch of .css and .css.map files in my partials directory because I've, naturally, saved all of them, and the Sass watcher dutifully compiled all of them too.
How do I achieve a clean structure like Bootstrap's while not having to manually delete every partial .css files? Ideal scenario is that every time I edit and save the partial files, Sass watcher compiles only the main .scss file.
I'm using VS Code on Mac with a Sass watcher plugin. Is it achievable in this environment?
https://sass-lang.com/guide
A partial is simply a Sass file named with a leading underscore. You
might name it something like _partial.scss. The underscore lets Sass
know that the file is only a partial file and that it should not be
generated into a CSS file. Sass partials are used with the #import
directive. (#import is soon to be deprecated, with a move to #use and #forward instead. https://sass-lang.com/documentation/at-rules/import)
Thanks Arkellys.
Ideally you have a main .scss file, like style.scss for example, and then the other partials exist, like _header.scss for example.
Once you have a partial like that, it's prudent to import it in the main .scss file, at the top of the file. In this case, it would be #import 'header';
Notice that we do not import the underscore...
If you don't have any errors after this, and it's still not compiling then check whether you have properly referenced the compiled css in the head of your html.
I'm using Koala for Win64 to compile sass (with lot of partials) to css with no problems, but Koala auto compile function is only runs when there are updates in root scss file, so I need to open Koala and press 'compile' button every time when I made changes to included partials.
Is there any way to configure scss auto compile to watch for changes in sass partials?
So came across this as I was having problems myself. Just documenting...
1st thing I did
was to create a style.scss or global.scss (making sure to setup "Auto Compile" in Koala) and only fill it with imports:
#import 'layout'; //_layout.scss
#import 'layout_modules'; // _layout_modules.scss
#import 'modules'; // _modules.scss
#import 'theme'; // _theme.scss
When I would work on the partials (partials will have a _ in front of the filename) and save I would get an autocompile confirmation (Koala Settings > General > "Notification when compile is completed")
But _layout_modules.scss would not trigger autocompile on save. If I switched over to another partial and saved, it would autocompile and Koala would still throw helpful errors for _layout_modules.scss.
2nd thing I did
then, was to remove the extra underscore in the filename - so it would just be _layoutmodules.scss (make sure to update your #import on style.scss) and worked as expected.
(I've been using Sass for all of 5 days.)
Short answer:
add _ before partial files and import them to the main file.
Thanks to #philtune
Using Sass (SCSS) / Compass, is it possible to import some CSS/SCSS into your code from an externally hosted file?
I am hosting a jQuery plugin on a CDN and want to keep the CSS in the same location so I don't lose it. However, I'd also like to have the option to be able to pull the CSS into my code and have it compile within my main CSS rather than pulling in an extra CSS file in my HTML. Is this possible?
For those of you who came here looking for a way of importing a CDN as a sass #import I found the answer here: https://github.com/webpack-contrib/sass-loader/issues/246
This is how you do it (using bootstrap as an example):
styles.scss
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css);
Sass will not compile any files from a remote location, all files must be accessible from the filesystem (local hard disk, shared network drive, mounted drive, etc.).
Sass also does not compile CSS files at all. https://github.com/nex3/sass/issues/556
#import "my.css";
Compiles to
#import "my.css";
Perhaps you might be interested in Compass extensions?
You sure can. In this context, it works exactly as the standard CSS #import rule. Just give it a URL to the CDN-hosted CSS file.
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import
#import url("http://fonts.googleapis.com/css?family=#{$family}");
Imports where the URL ends with .css.
#import "theme.css";
Imports where the URL begins http:// or https://.
#import "http://fonts.googleapis.com/css?family=Droid+Sans";
Imports where the URL is written as a url().
#import url(theme);
Imports that have media queries.
#import "landscape" screen and (orientation: landscape);
Yes, you can import external css file using PostCSS Import URL Plugin. It will pull the external CSS into your code, so you could compile it within your main CSS.
#import url('https://example.com/path/filename.scss');
Use import statement to import an external scss file to you local.
I found this nice Image gallery addon for Bootstrap but I am not sure how to integrate it on my rails project.
https://github.com/blueimp/Bootstrap-Image-Gallery
I figured I could use Rails (3.1) vendor's folder.
So that's what I did. I cloned those files in the vendor/assets folder:
git clone https://github.com/blueimp/Bootstrap-Image-Gallery.git
Ok now it's there, how do I use it?
How do I load these resources in my application?
my current application.js:
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require bootstrap
//= require dzscalendar.js
//= require dzstooltip.js
//= require bootstrap-datepicker
//= require gmaps4rails/gmaps4rails.base
//= require gmaps4rails/gmaps4rails.googlemaps
my current application.css:
/*
*= require_self
*= require_tree .
*= require bootstrap-datepicker
*/
#import "bootswatch/cerulean/variables";
#import "bootstrap";
#import "bootswatch/cerulean/bootswatch";
#import "dzscalendar.css.scss";
#import "dzstooltip.css.scss";
#import "gmaps4rails";
#import 'font-awesome';
I tried diverse things, but it looks like I don't understand what I am doing just now.
Hope I can find some guidance here. Cheers
Ok, time to take advantage of the asset pipeline here, there may be a better way of doing this but for now i would just copy the css, images and js into your existing project (keep them seperate for now like in the example)
Then in your view you are free to add your html (like in the example)
See https://github.com/kristianmandrup/bootstrap-addons-rails, it's a ready-to-use gem that you include in your Gemfile, so you can require Image Gallery using asset pipeline.