I get the error couldn't find file 'normalize.css' with type 'text/css'. I am using bower to manage my css/js dependencies and should have everything set up correctly, so I'm not sure why rails is telling me it can't find the file ...
> app/assets/stylesheets/application.css
/*
*= require normalize.css
*= require_tree .
*= require_self
*/
> config.application.rb
...
module RailsApp
class Application < Rails::Application
...
# Add Bower components to assets pipeline
config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')
end
end
> .bowerrc
{
"directory":"vendor/assets/bower_components"
}
And of course I have installed normalize.css using bower install --save normalize.css.
For a temporary workaround I just downloaded and placed normalize.css in my vendor/assets/stylesheets folder and used *= require normalize in application.css. The config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components') line doesn't seem to make a difference.
Related
I need to export a subset of my assets to some external sites. I've created a rake task to do that:
rake build:navbar
The problem is I cannot get the assets library to minify my library. Here's the code from my task method:
desc "Build navbar assets and markup for other sites."
task navbar: :environment do
# Set environment to production so pipeline will minify assets.
Rails.env = "production"
# Some setup code removed...
# How do we coax assets into minifying files?
Rails.application.config.assets.prefix = "../build/navbar/staging"
Rails.application.config.assets.js_compressor = :uglifier
Rails.application.config.assets.css_compressor = :sass
Rails.application.config.assets.digest = false
Rails.application.config.assets.compress = true
Rails.application.config.assets.debug = false
Rails.application.config.assets.paths = [Rails.root.join('/app/assets/javascripts'),
Rails.root.join('/app/assets/stylesheets/navbar')]
Rails.application.config.assets.precompile = ['navbar.js', 'navbar.css']
# Compile now.
Rake::Task['assets:clean'].invoke
Rake::Task['assets:precompile'].invoke
# Cleanup code removed...
end
It will generated a compressed version of my assets (navbar.css.gz), but not a minified version (navbar.min.css).
I've googled this up and down and it seems like this recipe of settings should do the trick. What am I missing?
I think I've identified the underlying problem. The assets pipeline task, i.e. sprockets-rails, doesn't fully respect config settings. It seems to override some settings depending on the Rails environment. And you can't simply change the Rails environment within a rake task.
The goal, again, is to port a subset of the Rails application's assets for another project using this rake command:
rake build:navbar
Here's some sample code that shows how I worked around these issues:
namespace :build do
desc "Build navbar assets and markup."
task navbar: :environment do
# Prep Builder
builder = Navbar::Builder.new(target: target)
builder.prep_build
# Why this? Setting Rails.env or ENV['RAILS_ENV'] didn't work.
system("rake build:navbar_assets RAILS_ENV=production")
builder.generate_markup_file
builder.move_output_files_to_build_directory
builder.cleanup
end
desc "Build navbar assets."
task navbar_assets: :environment do
# Configure the asset pipeline to compile minified files.
# NOTE: Sprockets only minifies files in production environment (or won't
# do it in development) so this assumes RAILS_ENV is set to production
# on the command line.
Rails.application.config.assets.prefix = "../build/navbar/staging"
Rails.application.config.assets.paths = [Rails.root.join('app/assets/javascripts'),
Rails.root.join('app/assets/stylesheets')]
Rails.application.config.assets.precompile += ['navbar.js', 'navbar.css']
# Let it rip.
Rake::Task['assets:clobber'].invoke
Rake::Task['assets:precompile'].invoke
end
end
There were also some issues with file-path-building in the code in the question. Those have been corrected.
I am using ember-cli-sass instead of broccoli-ruby-sass
These are the steps i have done
npm install --save-dev ember-cli-sass
bower install --save foundation
I am getting this error in the console after i started the ember server
I don't understand why it says "File not found: /app/styles/app.scss"
i don't have any app.scss a part from
I am missing something in the configuration, what's the problem exactly?
I am using three sass file
_global.sass
_music.sass
_player.sass
i import them in app.sass
#import global
#import player
#import music
i was reading the https://www.npmjs.com/package/ember-cli-sass and it says
Specify some include paths in config/environment.js:
ENV.sassOptions = {
includePaths: [
'bower_components/foundation/scss'
]
}
I am bit confused about these settings, i need some advices
I think you are getting the error because you may not have changed the name of your app.css file to app.scss
You your app/styles folder you should have a file called app.scss in that file I would put your imports
// app.scss
#import 'foundation';
#import 'global';
#import 'player';
#import 'music';
Then you need to add:
ENV.sassOptions = {
includePaths: [
'bower_components/foundation/scss'
]
}
To your config/environment.js like this:
module.exports = function(environment) {
var ENV = {
modulePrefix: 'test-sass',
environment: environment,
baseURL: '/',
locationType: 'auto',
sassOptions: {
includePaths: [
'bower_components/foundation/scss'
]
},
EmberENV: {
FEATURES: {
.....
If you are looking to use foundation in your ember-cli app use the ember-cli addon: https://www.npmjs.com/package/ember-cli-foundation-sass
I think ember-cli-sass by default looks for sass files with extension .scss. If you are using file extension of .sass, you need to specify it in sassOptions.
ENV.sassOptions = {
includePaths: [
'bower_components/foundation/scss'
],
extension: 'sass'
}
Check https://github.com/aexmachina/ember-cli-sass
I'm following this tutorial, and from the moment it tells me to integrate bootstrap I'm lost. I don't know anything about bootstrap, so I can't really troubleshoot it. Nothing happens, the formatting continues to look like standard HTML without any css styling at all.
This is my application.css.scss file:
/*
*= require_self
*= require_tree .
*/
#import 'bootstrap';
This is my application.js file:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
this is my view file (home.html.haml):
.container
- if #tasks.empty?
%span.text-warning There are no tasks!
- else
%table.table.table-hover.table-bordered
%thead
%tr
%th Title
%th Created at
%th Completed
%tbody
- #tasks.each do |task|
%tr
%td
%strong= task.title
%td.text-info= task.created_at
%td.text-success= task.completed
I know this is really specific, but since I don't know anything about bootstrap I don't know what to focus on as the problem. I'm running Rails 4.0.4, and the bootstrap-sass gemfile is 2.3.2.0
I just created a test Rails 4.0.4 app, renamed the application.css file to application.css.scss and added your
#import 'bootstrap';
line. By the way, I switched to the most recent gem version:
gem 'bootstrap-sass', '~> 3.1.1.0'
And everything works fine.
Update your Gemfile, run bundle update, the restart the server and try again. It should work fine.
I am using fontawesome 3.2.1 and bootstrap 3.0.0 in my rails 4.0.1 project. All my assets are located in vendor/assets.
the problem is that my fontawesome is working in development mode when when i compile my assets(production env) and run the server in production env, its not able to load fontawesome. the errors are as
Started GET "/assets/fontawesome-webfont.svg" for 127.0.0.1 at 2014-01-08 11:48:55 +0530
ActionController::RoutingError (No route matches [GET] "/assets/fontawesome-webfont.svg"):
actionpack (4.0.1) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
actionpack (4.0.1) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
the assets are as
$ls vendor/assets/
=> fonts images javascripts stylesheets
$ls vendor/assets/*
=> vendor/assets/fonts:
FontAwesome.otf fontawesome-webfont.ttf glyphicons-halflings- regular.svg
fontawesome-webfont.eot fontawesome-webfont.woff glyphicons-halflings- regular.ttf
fontawesome-webfont.svg glyphicons-halflings-regular.eot glyphicons-halflings-regular.woff
vendor/assets/images:
bg_direction_nav.png bxslider search-icon.jpg
vendor/assets/javascripts:
bootstrap bxslider fancybox others revolution_slider
vendor/assets/stylesheets:
bootstrap bxslider fancybox font_awesome others revolution_slider
$ls vendor/assets/stylesheets/bootstrap/
=> bootstrap.min.css
$ls vendor/assets/stylesheets/font_awesome/
=> font-awesome.css
my application.css is as
$cat app/assets/stylesheets/application.css
/*
* 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 top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require bootstrap/bootstrap.min.css
*= require others/theme.css
*= require others/bootstrap-reset.css
*= require font_awesome/font-awesome.css
*= require bxslider/jquery.bxslider.css
*= require fancybox/jquery.fancybox.css
*= require revolution_slider/rs-style.css
*= require revolution_slider/settings.css
*= require others/flexslider.css
*= require others/style.css
*= require others/style-responsive.css
*= require_self
*/
fontawesome are loaded in font-awesome.css as
#font-face {
font-family: 'FontAwesome';
src: url('/assets/fontawesome-webfont.eot?v=3.2.1');
src: url('/assets/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('/assets/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('/assets/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('/assets/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
glyphicons are loaded in bootstrap.min.css as
#font-face{
font-family:'Glyphicons Halflings';
src:url('/assets/glyphicons-halflings-regular.eot');
src:url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-Opentype'), url('/assets/glyphicons-halflings-regular.woff') format('woff'),url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),url('/assets/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg')}
i did try couple of solution like prepending 'font' or 'assets' to 'url' but none worked.
--UPDATE
contents of config/application.rb
config.assets.enabled = true
config.assets.version = '1.0'
config.assets.paths += ["#{config.root}/vendor/assets/fonts", "#config.root}/app/assets/images/**", "#{config.root}/vendor/assets/images"]
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif *.eot *.svg *.ttf *.otf *.woff vendor/assets/stylesheets/**/* vendor/assets/fonts/*)
["#{config.root}/vendor/assets/javascripts", "#config.root}/vendor/assets/stylesheets"].each do |d|
config.assets.precompile += Dir.glob("#{d}/*").map{|f| "#{f.gsub(d + '/', '')}/**/*" if File.directory?(f)}.compact
I solved the problem as specified below.
1) Firstly, dont refer assets inside .css file. Rename the file to .css.scss. Thats the same extension whenever u create controller and it creates assets for that controller.(javascript and css). There are multiple applications to convert css to scss. Use them if the css is large.
2) use font-path whenever you want to refer a font inside a stylesheet. ie. use methods provided by rails to refer to assets rather than using 'src'
eg
#font-face {
font-family: 'MuseoSans-700';
src: url(font-path('museoSans/244DD4_0_0.eot'));
src: url(font-path('museoSans/244DD4_0_0.eot?#iefix')) format('embedded-opentype');
src: url(font-path('museoSans/244DD4_0_0.woff')) format('woff');
src: url(font-path('museoSans/244DD4_0_0.ttf')) format('truetype');
}
In the above code, my file is as "app/assets/stylesheets/fonts.scss" and my fonts are located in
$ls vendor/assets/fonts/
fontawesome museoSans museoSans500
$ls vendor/assets/fonts/museoSans
244DD4_0_0.eot 244DD4_1_0.ttf 244DD4_2_0.woff 244DD4_4_0.eot 244DD4_5_0.ttf 244DD4_6_0.woff 244DD4_8_0.eot 244DD4_9_0.ttf
244DD4_0_0.ttf 244DD4_1_0.woff 244DD4_3_0.eot 244DD4_4_0.ttf 244DD4_5_0.woff 244DD4_7_0.eot 244DD4_8_0.ttf 244DD4_9_0.woff
244DD4_0_0.woff 244DD4_2_0.eot 244DD4_3_0.ttf 244DD4_4_0.woff 244DD4_6_0.eot 244DD4_7_0.ttf 244DD4_8_0.woff
244DD4_1_0.eot 244DD4_2_0.ttf 244DD4_3_0.woff 244DD4_5_0.eot 244DD4_6_0.ttf 244DD4_7_0.woff 244DD4_9_0.eot
3) During asset precompilation, the helpers like 'font-path' or 'asset-path' help in pointing to the right asset. ie. if u specify it as
src: url('/assets/museoSans/244DD4_0_0.eot'));
this is still going to be the same in the compiled asset. it should ideally be
src: url('/assets/museoSans/244DD4_0_0-67652745236457645234dghfhsagfd64354.eot'));
You can 'grep' and check out the compiled file in "public/assets".
4) another way of making sure the assets are loading is the to call them from url.
5) Please set 'config.assets.compress = false' in your production or staging env file and run the application locally in prod/staging env so as the check the views to make sure that the assets are loading.
You can checkout https://github.com/joshsoftware/website/commit/859f2709180e9fb0aac59549d64bd4351a2842b3 commit for more understanding.
Your svg doesn't seem to be compiled, the fingerprint seems missing except if you set:
config.assets.digest = false
I was getting the same " no routes match GET" after precompiling. you can try to add the svg here in your config/application.rb:
config.assets.precompile += %w(*.svg)
And then retry a:
rake assets:precompile RAILS_ENV=production
In my case a simple rake assets:precompile wasn't enough i needed to specify the RAILS_ENV and RAILS_GROUPS (If the version of rails is lower than 4).
Normally the compiled assets are found in the public/assets directory.
I hope it helps
UPDATE:
Another idea coming from my experience with ckeditor with rails 4 in production. The assets compilation with digest is not working (https://github.com/galetahub/ckeditor). You need to add a rake task that copies/modify some files in the public/assets directory after compilation. Here is the code:
namespace :ckeditor do
desc 'Create nondigest versions of some ckeditor assets (e.g. moono skin png)'
task :create_nondigest_assets do
fingerprint = /\-[0-9a-f]{32}\./
for file in Dir['public/assets/ckeditor/contents-*.css', 'public/assets/ckeditor/skins/moono/*.png']
next unless file =~ fingerprint
nondigest = file.sub fingerprint, '.' # contents-0d8ffa186a00f5063461bc0ba0d96087.css => contents.css
FileUtils.cp file, nondigest, verbose: true
end
end
end
# auto run ckeditor:create_nondigest_assets after assets:precompile
Rake::Task['assets:precompile'].enhance do
Rake::Task['ckeditor:create_nondigest_assets'].invoke
end
You can easily replace ckeditor with fontawsome.
I've just installed Foundation 5 with Sass and am using Compass to watch my stylesheets. I wanted to know what's the best practice for adding my custom styles. I've already created a custom.scss file and am referencing it using #import "custom"; in my app.scss file.
If I wanted to go ahead and change the background colour of the body, for example, how would I go about doing this using the mixins. I'm adding:
$body-bg: red;
to my custom.scss file, but the body's background isn't changing. Should I just edit the _settings.scss file, that seems wrong...
Any idea what I'm doing wrong? Thanks in advance!
Here's my config.rb:
# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
In your case maybe would be better use these structure:
app.scss:
#import "custom"; //where you define variables for foundation such as $body-bg: red;
#import "foundation";
#import "other styles";
Yes, I've always just edited the _settings.scss file -- then use a decent file comparison (like Araxis Merge or Kaleidoscope to merge in new options as updates are made). If I have custom variables, I'll stick those at the top of the settings file (that need to effect both the settings and my global stuff after the fact).