I've installed foundation-rails in my Rails app and run rails g foundation:install. The project-specific file(s) (mostly foundation_and_overrides.scss) are properly installed. The gem is there and it had no trouble installing, and the dependencies (SASS, Compass) are also there. But I'm getting:
Error compiling CSS asset
SASS::SyntaxError: File to import not found or unreadable: global.
Originating from:
/Users/local/.rvm/gems/ruby-2.0.0-p353/gems/foundation-rails-5.0.2.0/vendor/assets/stylesheets/foundation/components/_accordion.scss:1
After investigating, I've discovered that _accordion.scss was #imported in the main foundation.scss file, located two directories up in stylesheets/:
#import 'foundation/components/accordion'
The "missing" file, _global.scss, meanwhile, is in that same directory. If I then change the #import code in _accordion.scss from #import 'global' to #import 'foundation/components/accordion', it clears and moves on to the next error (there are a lot of sub-imports here).
It's clear that what's happening is SASS is looking for _global.scss relative to the top stylesheet, foundation.scss, and not relative to the imported stylesheet asking for it (_accordion.scss).
I can't imagine this is a bug in Foundation/Foundation-Rails – this gem wouldn't work for anyone – and I don't want to modify the gem's contents myself.
So my question: do I have to change some SASS settings to allow #import relative to an imported stylesheet? I don't want to modify this gem to make it work (I'd like to allow for future updates to the gem).
Edit
Clarification of directory structure within the gem's vendor/assets/stylesheets directory:
foundation.scss
foundation/components/_accordion.scss
foundation/components/_global.scss
Edit 2
You can actually see the gem's code and structure on github
Edit 3
Thought I'd solved the problem, but I didn't: changing from an #import to a =require got rid of the errors, and included Foundation's CSS. But require does not import the SCSS functionality - variables, mixins - that Foundation provides. There's no way to change global values this way, or to retrieve them or the mixins from the main stylesheet or other #imported stylesheets.
It looks like Foundation thinks this is the best possible solution:
Manually add Foundation's stylesheet subdirectories (each of them) to SASS's :load_paths in the main block of application.rb:
config.sass.load_paths += [
"#{Gem.loaded_specs['foundation-rails'].full_gem_path}/vendor/assets/stylesheets/foundation/components",
"#{Gem.loaded_specs['foundation-rails'].full_gem_path}/vendor/assets/stylesheets/foundation/"
]
Related
I have installed bootflat using bower. The instaltion location was set up as "vendor/assets/components/Bootflat". I have also included the relevant files in my application.scss, application.js and application.haml files. I assume that it's being included correctly because everything is working as expected.
My question now is, how do I customize scss variables used in Bootflat? Here is my current code in application.scss (app/assets/stylesheets):
$alert-primary:red !important;
#import "Bootflat/bootflat/scss/bootflat";
"$alert-primary" is a variable that's already used by Bootflat and I want to redefine it. How/Where would I redefine this? I get that what I'm doing above is probably not right as the variable is defined by a Bootflat file, which would mean that my definition above is overwritten. But I also do not want to change the scss code in the origin files? What is the best solution? Will it be to copy and paste the code for a specific component into my app's stylesheet and then redefine a component after importing bootflat (this should overwrite the original definition by Bootflat)?
Trying to figure out how to import some SCSS files in a Rails 4 app. The files are:
#import "shared/mixins",
"shared/reset",
"shared/about-light";
I'm not sure how to do this properly and I don't know how to set the path either.
I put these files in a folder called "shared" and I put this folder inside of /lib/assets/css/ Is this the right way to do it?
Also tried to put the files in /vendor/assets/stylesheets/
How do I properly import these files?
Error:
File to import not found or unreadable: mixins.
Load paths:
We typically put mixins in a partial file called _mixins.scss directly in the app/assets/stylesheets/ directory, possibly under a subdir like shared if you want more organization. In your application.css you can then do (as you did)
#import 'shared/mixins';
#import 'shared/colors';
or whatever. If you really want them to sit somewhere else, you should look into the load_paths configuration setting for SASS. You can tell SASS where to look when it's importing files and probably lib/assets and vendor/assets are not included by default.
To add this configuration, in your environment.rb or other config file, you can do something like
config.sass.load_paths << File.expand_path('../../vendor/assets/stylesheets/')
which will make SASS look in vendor/assets/stylesheets in addition to all the other directories it searches in by default.
I think you are confusing partials and mixins.
From the Sass documentation:
Mixin
"A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. You can think of a mixin like a function for css (awesome right!)." More about mixins here.
Partial
"You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore." More about partials here.
Therefore, what you are attempting to import are indeed partials and should be prefaced with an underscore.
Your directory structure should look like this:
assets
stylesheets
application.css.scss
shared
_mixins.scss
_reset.scss
_about-light.scss
And your application.css.scss file should look like this:
#import "mixins";
#import "rest";
#import "about-light";
Ok so I was able to work this out as follows:
In application.rb add the following:
config.sass.load_paths << File.expand_path('../../vendor/assets/stylesheets/')
In the CSS file import as:
#import "mixins",
"reset",
"about-light";
Put the files in to:
/vendor/assets/stylesheets/
Restart the server.
I have a stylesheet app/assets/website/base.scss that starts with:
#import "bootstrap-select.min.css";
The bootstrap-select.min.css file exists in the vendor/stylesheets/ folder. When I try to access it in production, I get a 404:
"NetworkError: 404 Not Found - http://mysite.herokuapp.com/assets/bootstrap-select.min.css"
(It works fine on my development rig though.)
Here's what I've tried so far:
Tried using #import asset-path("bootstrap-select.min.css"). Got a syntax error (apparently asset-path doesn't work with imports).
Tried adding config.assets.precompile += %w(bootstrap-select.min.css) to config/environments/production.rb
Any idea why this might be happening?
Rails 4.0.4 / Ruby 2.1.2
Ended up changing it from bootstrap-select.min.css --> bootstrap-select.min.scss ..
It worked!
Sass actually places the contents of .scss files in place - With .css files it just links to the file with an #import, which is why it wasn't working (thanks #cimmanon!)
Actually, you could just remove .css suffix from #import "bootstrap-select.min.css"; Sass expects from you just the name of the assets and is smart enough to look in all possible asset placements and import whatever it can import (so the name should be format-independent)
I am trying to use Foundation 5 in a Rails 4 app. The problem I am having is I would like to have some custom CSS in addition to Foundation. In my CSS I would like to use some of the variables from Foundation. To use them I did added the following to the top of my scss file
$include-html-classes: false;
#import "foundation/components/global";
This works great except there is some junk still included on each page. According to https://github.com/zurb/foundation/issues/1629 this shouldn't happen.
If you look at the source here https://github.com/zurb/foundation/blob/master/scss/foundation/components/_global.scss then you can see that the meta stuff starting at line 284 will be included.
This is a problem since it will be included on every page that I want to use the variables/mixins on. Rails 4 combines all the css files into one which will have this same code over and over again...
Is there any way to include this file without it including any text?
I just discovered that using
#import "foundation/functions";
#include exports("global") {}
#import "foundation/components/global";
will include all the variables and mixins but won't add anything to your scss file!
I believe this is because the exports function is there to prevent css from being duplicated every time the global file is included. By having the fake exports function call it thinks it's already added the css.
I really don't know how to debug this, maybe somebody has an idea.
I have many LESS files which I import in application.css.less. We use Bootstrap, and we want to use the variables that are defined in it within our own styles, so we can't require the LESS files in the manifest (as required files don't seem to make their variables public to other required files).
Everything works nicely, except a few of the LESS files - when edited - don't trigger a recompile of the CSS! It seems to be quite random which do and which don't, and it's only 6 of them which don't (compared to about 25 in sum). When I require one of them in the manifest, it successfully leads to a recompile - if I #import it, it doesn't.
Any idea on how to debug this? If I rename one of them (e.g. from time_records.less to time_records2.less), it successfully trigger recompile after changes... So it has do do something with the names of these 6 specific files:
calendars.less
contacts.less
folders.less
handout.css.less
print.css.less
time_records.css.less
Any help is greatly appreciated. Thank you.
The latest edition of less-rails implements Import Hooks that should solve your problem. I realize this is a late answer and it may have not existed at the time.
Import Hooks
Any #import to a .less file will automatically declare that file as a sprockets dependency to the file importing it. This means that you can edit imported framework files and see changes reflected in the parent during development. So this:
#import "frameworks/bootstrap/mixins";
#leftnav { .border-radius(5px); }
Will end up acting as if you had done this below:
/*
*= depend_on "frameworks/bootstrap/mixins.less"
*/
#import "frameworks/bootstrap/mixins";
#leftnav { .border-radius(5px); }
The depend_on Directive
depend_on path declares a dependency on the given path without including it in the bundle. This is useful when you need to expire an asset's cache in response to a change in another file.