I'm setting up first ruby site in production, everything works ok, but when I run
rake assets:precompile
It adds the css/js in "public/assets/" directory ok, but they have paths and line numbers in the files? So was just wondering how to get it all on one line and without line numbers/comments? Have I missed a setting or anything for this? Here is an example of how my application-428d86248ca363.css comes out:
/* line 1, /home/joe/myapp/app/assets/stylesheets/main.scss */
body {
background: #ccc;
}
/* line 6, /home/joe/myapp/app/assets/stylesheets/main.scss */
#head {
background: #666;
}
/* line 4, /home/joe/myapp/app/assets/stylesheets/welcome.css.scss */
.block {
color: #1e1e1e;
}
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*/
Also you can see it includes the big comment at end. How do I get it to go all on one line with no comments?
SCSS
they have paths and line numbers in the files
That's a problem with SCSS which should resolve if you use rake assets:precompile RAILS_ENV=production
Fix
Whilst looking for a reference, I found this answer and this github:
Just to update previous answer, by Chase T.
For me this is not working anymore.
#config/compass.rb
line_comments = false
should become
line_comments = 0
Considering the resource uses compass.rb, I looked to see how to do it in a standard Rails app. I found the way to do it is to use a system, and looks like you can use this command:
#config/application.rb
config.sass.line_comments = false
This is confirmed with this information:
Using Rails 4.1 and after looking and looking (and possibly misreading
the documentation) I got this to work by adding the following to
/config/environments/development.rd & production.rb
config.sass.preferred_syntax = :scss
config.sass.style = :compact
config.sass.line_comments = false
Style can be set to :nested,
:expanded, :compact, :compressed. You can see the different options
here:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
Also, make sure to restart your server to see the compiled version
change
Hope this helps someone.
Related
are any alternatives for compile .scss files in action in ASP.NET MVC controller?
I have /Content folder with two files: main.scss and external.scss. In my controller I'm using NSASS package:
public ActionResult GetCss(string scssPath)
{
string scss = #"#import """ + Server.MapPath(scssPath) + #""";";
var compiler = new SassCompiler();
string compiled = compiler.Compile(source: scss);
return Content(compiled.ToString(), "text/css");
}
my view:
<link href="#Url.Action("GetCss", "Theme", new { scssPath="~/Content/sass/main.scss" })" rel="stylesheet" type="text/css" />
main.scss file:
#import "external";
I have error
Error: File to import not found or unreadable: external
I tried to write #import "external.scss" but same problem.
We have the same (or similar problem). The problem I'm seeing is that SassCompiler is trying to find the #import files relative to the current working directory, instead of relative to the file which contains the #import.
There might be a few ways around this depending on what you're trying to do.
My workaround consisted of making a temporary copy of the directory structure and then updating all the #import statements in each file to make them relative to the working directory before compiling.
UPDATE
I got this working without this hack by passing in all the paths to the 'includePaths' parameter. I had tried this before without success because I was using relative paths. If you use absolute paths then it works.
NSass is outdated. It was updated last time in 2013 and can't compile many new scss syntaxes, but if you want to compile few simple lines and have rest precompiled, here's simplest solution I came up with.
string scss = System.IO.File.ReadAllText(AppDomain.CurrentDomain.BaseDirectory + #"\Design\Scss\custom.scss");
scss += "$primary: #f80;$secondary: #0f2;";
Btw, if you would like to import other scss files into your main scss file, you can use following code but note I'm not good at Regex and thins it might have flaws.
scss = Regex.Replace(scss, "import \"", m=> m + AppDomain.CurrentDomain.BaseDirectory + #"Design\Scss\");
I have this file app/assets/stylesheets/config.rb with the following content:
http_path = "/"
css_dir = "."
sass_dir = "."
images_dir = "img"
javascripts_dir = "js"
output_style = :compressed
relative_assets=true
line_comments = false
what is it for?
To answer your question "what is it for", it's configuration for the Compass scss compiler. The reference in the other answer is handy, but for up to date details without speculation check out the details of the Compass configuration file here:
http://compass-style.org/help/tutorials/configuration-reference/
I had originally posted to also provide an answer for where the file came from (if you didn't create it yourself. I answer this because it was 'magially' appearing in my Rails project, and a Google search for generation of config.rb in Rails ends up here. I first supsected sass-rails, but someone from that project confirmed they don't generate that file. Then I figured out that auto-generation of this file was being caused by Sublime Text with the LiveReload package. See the related github issue.
I'm guessing that it defines how to find assets from the stylesheets folder, and some output options on what happens to the assets before being sent to the client browser.
http_path = "/" <= probably the root path to assets, so if you had
application.css, the URL path to it would be
http://example.com/application.css
css_dir = "." <= the directory to look for css files. "." in linux
means "the current directory", so this would set you
CSS path to app/assets/stylesheets
sass_dir = "." <= same as above, except for .sass/.scss files
images_dir = "img" <= images go in app/assets/stylesheets/img
javascripts_dir = "js" <= javascript go in app/assets/stylesheets/js
(seems like a strange place to put them)
output_style = :compressed <= either to produce .gzip'ed versions of files
or to minify them, maybe both - consult docs on this
relative_assets=true <= relative, as opposed to absolute paths to assets, I think
line_comments = false <= I think this turns on/off the ability to include comments,
or maybe whether the comments are included in the
compressed versions of the file. turn it to "true" and
compare the assets, as served to the browser, and see
what the difference is
You can fix it by removing Live Reload plugin from Sublime Text.
Sublime Text > Preferences > Package Control > Remove Package > Live Reload
For me it's good solution because I didn't using Live Reload.
Who using live reload please follow issue: github.
I would like to stop importing my Sass files with Sprocket and using the #import function of Sass.
It works fine but the files are not imported one by one in developement mode so the debuging is harder.
Is there a way to import all files separately with Sass in developement mode?
You can enable asset debugging in Sprockets by adding the setting to your development.rb:
# Expands the lines which load the assets
config.assets.debug = true
When debug is true, compiled CSS files contain line numbers that tell you where to find the uncompiled CSS:
/* line 5, ../../../app/assets/stylesheets/_colors.scss */
.color-facebook-blue {
color: #3B5998;
}
My stylesheet has:
.asc {
font-size: 2em;
background-image: url(/images/up_arrow.gif);
}
.desc {
background-image: url(/images/down_arrow.gif);
}
The font-size works but the background image (arrow) doesn't.
I get ActionController::RoutingError (No route matches [GET] "/images/up_arrow.gif"):
I tried lots of things in routes but nothing worked.
Try this:
.asc { font-size: 2em; background-image: url(/assets/up_arrow.gif); }
.desc { background-image: url(/assets/down_arrow.gif); }
That's how I do it in a 3.1 app I'm working on. Your /images is probably mapped to app/public/images.
Finally found that I needed to do the new precompile of assets step.
'I shoulda read the manual'
Compiled assets are put in public/assets directory by default (the destination is defined in config.assets.prefix).
To create compiled versions of your assets use bundle exec rake assets:precompile
If you don't have write access for the production file system, use this task locally and then copy the compiled asset files.
The asset compilation process:
1. Concatenates & compresses all JavaScript files into one master. Uglifier is the default for the process.
2 Compresses (minifies) all CSS files into one master .css file. CSS is compressed by yui by default.
3. Allows for high level languages like coffeescript to use the assets.
Note: It is possible (though not a great idea) to disable the asset pipeline by changing config/application.rb and set
config.assets.enabled = false
You can skip the asset pipeline when creating a new application with the —skip-sprockets option, e.g. rails new appname --skip-sprockets
You can also set config.assets.compile = true This way the assets are only compiled when a request for them is made.
Dumb question perhaps, but are you positive that /images/up_arrow.gif exists?
When you 404 on an public asset in it just falls through to the rails router. It's not really a routing problem; you just get a routing error because there are no routes defined for static assets.
I had this same issue with Rails 3.2.13.
Solution was to modify the css to this:
.asc { font-size: 2em; background-image: url(up_arrow.gif); }
.desc { background-image: url(down_arrow.gif); }
I'm trying to refer to a mixin defined in one file (application.css.scss) in another (home.css.scss). I have tried importing application into home but still get an "Undefined mixin" error.
Is there a way to automatically import all of my files, or what is the best way to manage imports between files?
I haven't been able to make the jump to 3.1 yet, but using Compass & Sass for quite a while, I've found it's best to try to manage mixin/definition sass separately from your actual CSS generating sass. In this way, the mixin files can be treated freely like code libraries, included wherever necessary, without them repeatedly generating CSS rules.
So you might have:
/* my-mixin-concern.scss */
$default_foo: 123px !default;
#mixin some-concern($foo: $default_foo) {
// do something
}
/* application.scss */
$default_foo: 321px; // optionally, pre-set the default value before import.
#import 'my-mixin-concern';
p { #include some-concern; }
/* home.scss */
#import 'my-mixin-concern';
body.home p { #include some-concern(9000px); }
In this way you are explicitly importing all requirements for each scss file, similarly to how you would do so in a code library.
Pure Rails Solution
Step 1. Rename
application.css -> application.css.scss
Step 2. Refactor
// application.css.scss
/*
*= require_self
*/
#import "mixins.css.csss"
#import "project.css.scss"