I'm trying to deploy a Rails 3.1 app I was working on locally. But once deployed to Heroku (Cedar stack), I encounter an issue I wasn't having locally, and I can't find any solution to this.
Actually, in some of my SCSS files, I import other SCSS files located in the parent directory. Among the several syntaxes I tried :
#import "file.css.scss";
#import "file";
#import "/file.css.scss";
#import "/file";
#import "../file.css.scss";
#import "../file";
Most of these work locally, but none work on my heroku Cedar app. I also tried renaming my imported file into "_file.css.scss" with an underscore, as it seems it's the standard format for SCSS files made to be imported. But didn't change anything.
The error heroku logs are giving me is :
ActionView::Template::Error (File to import not found or unreadable: /mixins.css.scss.
I'm getting out of ideas right now, so would be thankful if you had any clues to solve this.
Thanks a lot,
Cheers !
The syntax should be
With the following folder structure
/app/
/assets/
/stylesheets/
/pages/
index.css.scss
products.css.scss
application.css.scss
If you wanted to include the scss files in /pages/ from application.css.scss you would do this:
#import "pages/index";
#import "pages/products";
You should also be able to do the following (however I'm not sure if this is limited to having Compass in the project or not).
#import "pages/*";
Being able to do glob imports is awesome. But I think it may be Compass only, or at least it used to be.
If the file your importing is within the same folder the following should work:
#import './file.css.scss';
I found it's important to have the relative path and file extension present when I ran into a similar issue. Since you were trying to use ../ that would look for the file your importing in the parent folder rather than within the same folder.
Your best bet is to use the built in Rails Asset Pipeline to handle including your style files.
In your app/assets/stylesheets folder you should have a file named application.css. This file uses Sprockets to automatically include all of your css files placed inside of the app/assets/stylesheets folder.
At the top of the file you'll see this:
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require_tree .
*/
The *= require_self part includes any css style written in this actual application.css file, while the *= require_tree . part includes assets found in app/assets/stylesheets.
If you'd like to change the order of inclusion, or specify a specific stylesheet, for example a file named mixins.css.scss located in app/assets/stylesheets, here is how you'd do that:
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require_tree .
*= require_mixins
*/
And the magic of sprockets will include your file for you.
Related
I have a site_settings.scss file which contain all the the variables for my Rails app:
app/assets/stylesheets/site_settings.scss
$primary_color: #4285F4;
$dark_color: #333333;
...
Right now, if I want to use these variable inside a file i need to do this inside that file:
import 'site_settings.scss'
I need to put this at the beginning of EVERY FILE that I want to use these variables, otherwise Rails will give me the Undefined variable: error.
I have tried putting import 'site_settings.scss' inside the application.scss or custom.scss but neither of them is working.
I have also tried to use require 'site_settings' in the aplication.scss and rename application.scss to application.css.scss as being mentioned here: http://mildlyinternet.com/code/scss-variables-asset-pipeline.html , but it's still not working.
Here is my application.scss:
/*
*= require_self
*= require font-awesome
*/
#import "bootstrap-sprockets";
#import "bootstrap";
#import "custom";
#import "devise";
#import "site_settings";
So, how do I solve this, so that I don't have to write import 'site_settings.scss' in every file each time?
You should rename all files that will use the shared variables to start with _.
This will render the other files in context of partial files, which will use the previous declared variables in #import 'site_settings'. So you will have site_settings.scss and quickrails/_general.scss, quickrails/_media_query.scss and so on.
Those imports are considered partials, that is why the name should start with underscore, but when importing you use without it. Here is a material about this:
Why put in front of the file name "_" or "_" in scss/css?
Replace any relevant = require with #import and remove any = require even if you think you've commented it out.
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'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/"
]
I am using Rails 3.1RC4 with default SASS setup. I have the following files
application.css.scss
/*
* This is a manifest file that'll automatically include all the stylesheets available in this directory
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
*= require_tree .
*/
_variables.css.scss
$var1 : somevalue;
...
site_layout.css.scss
#import "variables";
... Some Sass Code
But I can't access the variables defined in _variables.css.scss in site_layout. What am I doing wrong? Rails is apparently finding the variables file since it doesn't throw a "file not found" error, which it does if I change the import filename. Still the vars are not carried over.
Any ideas?
Thanks!
The issue seems to be fixed with the latest release of rails & sprockets. In your gemfile:
gem 'rails', :git => "git://github.com/rails/rails.git", :branch => "3-1-stable"
The first part of your question (the application.css.scss code snippet) doesn't seem to have any relevance here, since it's just commented-out code, so I'll skip that part.
For the second code snippet, I don't believe SASS is set up to import a "partial" quite like you're doing here. You'd be better off doing something like this:
_variables.scss (Renamed from _variables.css.scss):
$var1: somevalue;
Note that the underscore in your filename is not required like it would be for a Ruby partial. You can just as easily name it variables.scss as long as you change the import statement to #import "variables";
site_layout.scss (Renamed from site_layout.css.scss)
#import "_variables";
.test_thingy {
color: $var1;
}
This will generate a site_layout.css file that contains the following code replacement:
.test_thingy {
color: somevalue; }
Note that there's no need to have files named like filename.css.scss like you would with HAML/ERB files. Simply name the file what you want it to be. For example, filename.scss will cause SASS to generate a CSS file called filename.css automatically.
I recently branched one of my Rails 3.0 projects with the 3.1 rc1 to try the new assets pipeline. I've been using Sass in the project before going 3.1 so I've been setting up some variables and functions in a separate configure file and let all my other sass files import that one file at the first line.
This has been working out great to not repeat some color codes and general geometry through in the stylesheets. Problem is now with the new Assets Pipeline is that as I've understood it converts the ".css.sass" files to raw css before appending it to the rest of the code.
So if i specify, in my "application.css":
/*
*= require ./configure
*= require ./what_ever_other_files_i_want_to_import
*/
I get errors like:
Sass::SyntaxError
Undefined variable: "$interactive".
When i try to access the file from: http://localhost:3000/assets/application.css
Any ideas?
Sass supports Partials. That way you can include your separate configuration in __configuration.sass_ and reference it with
#import "configuration";
from your main sass-file.
Unfortunately I found out that SASS variables are be page specific.
If you want to carry your variables across all files, remove the
*= require_tree . line from your application.css.scss file and replace it with the #import "layout.css.scss"; directive to manually import each sass file.
Yes you have to #import each file