I am using the rails-bower gem. https://github.com/rharriso/bower-rails
I installed font-awesome, my bowerfile looks like this
# A sample Bowerfile
# Check out https://github.com/42dev/bower-rails#ruby-dsl-configuration for more options
# asset 'bootstrap'
asset 'bootstrap-sass'
asset 'font-awesome'
asset 'jquery'
asset 'jquery-ujs'
asset 'nicescroll'
After doing a bower install my font-awesome works.
When pushing to heroku my stylesheets aren't loaded. This because I have to do a $ rake assets:precompile
The precompilation triggers a bower:resolve which causes the font-awesome.css to not be found anymore and my site quits working.
couldn't find file '/home/christoph/Documenten/kratos/vendor/assets/bower_components/font-awesome/css/font-awesome.css'
(in /home/christoph/Documenten/kratos/app/assets/stylesheets/application.css.scss:14)
The font-awesome.css file is located at that directory but it is named font-awesome.css.erb. How can I fix this so that the erb file is referenced when doing an asset precompilation.
This whole thing also blocks me pushing to heroku.
Related
Hi My I am using the Rails 5.2.1
ruby 2.4.0
I have style.scss and style.css both files present in the rails project.
The application is working fine on the Development environment.
But in the production on Nginx server after precompiling the assets by
rake assets: precompile
The application view is distorted and browsers is giving 404 style.css not found error.
please update how to manage this kind of situation in assets when both .css and scss both are preset, or should I paste the content of style.css file in end of the style.scss file.
I am using yarn with my rails 5.1 app (not webpacker, just the default asset pipeline).
Running a local server in development environment, I experience no issues with my assets.
But as soon as I precompile my assets (the environment doesn't matter) or let Heroku package my assets, all stylesheets (of node modules) I imported from within my application.sass file don't work anymore.
The reason for that behavior is that sass compiles all files into one output file, but because of some reason appears to miss the #import statements which include node modules and load these files separately.
So this:
#import "components/index.sass"
#import "nodemodule/nodemodule.css"
Compiles to this in development:
// content of "components/index.sass"
// content of "nodemodule/nodemodule.css"
and to this in production:
// content of "components/index.sass"
#import "nodemodule/nodemodule.css"
while loading node_module/nodemodule.css separately as an asset, but the browser cannot resolve it. Javascript works fine.
The links are from my project that you can use as reference
in your asset.rb you need to include the /node_modules path in your default load_path.
If you open the rails console and input Rails.application.config.assets.paths you should see the new path /yourproject/node_modules added.
Then you simply write:
#import "nodemodule.css"
In my case for bootstrap 4 in my application.scss
#import bootstrap/scss/bootstrap
which correspond to the file in node_modules/bootstrap/scss/bootstrap.scss
for jquery.js and bootstrap.js you can check my application.js
I was having the same problem. Inspired by this comment removing file extensions from the imports ended up fixing it.
This didn't work:
#import "#shopify/polaris/styles.css";
#import "#uppy/core/dist/style.css";
#import "#uppy/dashboard/dist/style.css";
while this did:
#import "#shopify/polaris/styles";
#import "#uppy/core/dist/style";
#import "#uppy/dashboard/dist/style";
The node_modules need to be installed with npm install for example, so they're probably not getting installed on Heroku. Check out https://devcenter.heroku.com/articles/using-multiple-buildpacks-for-an-app
Most likely, you need to setup a Node.js buildpack which will install your npm dependencies.
I have finally found the problem. It is a very nasty bug of the sass-rails gem & an unfortunate design of the sprockets component of Rails.
1) sass-rails
#import does not seem to work with node_modules as it does with other assets. While those other assets get compiled into one file, node_modules only get referenced, loaded by the browser as separate sources, but ultimately not being used by the browser.
2) sprockets
Sprockets' require statement does only work if it is at the beginning of a file. Or as they put it in their documentation:
Note: Directives are only processed if they come before any application code. Once you have a line that does not include a comment or whitespace then Sprockets will stop looking for directives. If you use a directive outside of the "header" of the document it will not do anything, and won't raise any errors.
However, in my case, I was importing directives from a file that itself was imported from application.sass.
I am using the Play! Framework ( 2.6.2 ), Scala ( 2.12.2 ) and trying to integrate LESS into it.
I was using this tutorial on their documentation website.
In my build.sbt file this is the code in place:
lazy val root = (project in file(".")).enablePlugins(PlayJava, PlayEbean, SbtWeb)
includeFilter in (Assets, LessKeys.less) := "*.less"
excludeFilter in (Assets, LessKeys.less) := "_*.less"
LessKeys.compress in Assets := true
And in my plugin.sbt file I've added:
addSbtPlugin("com.typesafe.sbt" % "sbt-less" % "1.1.2")
I've got 2 files with .less extention. main.less and login.less in a /css folder under /public directory.
When I compile and run the project in my target folder the files stay as .less files and don't get compiled into .css files.
In my HTML template code I have this line:
<link rel="stylesheet" media="screen" href="#routes.Assets.versioned("css/login.css")">
The link to the stylesheet works if I change the extention from login.less to login.css but the variables don't seem to be accessible in the login.less file.
The link to the stylesheet doesn't work with the .css extention as expected because the framework doesn't seem to be compiling the files to .css, it just seems to leave them as .less files. Therefore I'm just getting a 404 on the .css file. If i change the extention in the link to .less it then works fine but variables I've imported from main.less to login.less don't work.
Is there a step I'm missing? Can somebody explain why the framework would not compile the .less files to .css files in my target folder?
EDIT 1: After trying the fix suggested by #marcospereira: I think the application is trying to compile both files but also returns me an error and application doesn't run at all.
[info] LESS compiling on 2 source(s)
-------
Unexpected exception
JsTaskFailure: java.lang.NoSuchMethodError: org.mozilla.javascript.ScriptRuntime.setObjectProp(Ljava/lang/Object;Ljava/lang/String;Ljava/lang/Object;Lorg/mozilla/javascript/Context;Lorg/mozilla/javascript/Scriptable;)Ljava/lang/Object;
at io.apigee.trireme.node10.main.trireme._c_anonymous_1(trireme.js:37)
at io.apigee.trireme.node10.main.trireme.call(trireme.js)
at org.mozilla.javascript.ContextFactory.doTopCall(ContextFactory.java:394)
at org.mozilla.javascript.ScriptRuntime.doTopCall(ScriptRuntime.java:3102)
at io.apigee.trireme.node10.main.trireme.call(trireme.js)
at io.apigee.trireme.core.internal.ScriptRunner.runScript(ScriptRunner.java:762)
at io.apigee.trireme.core.internal.ScriptRunner$4.run(ScriptRunner.java:702)
at org.mozilla.javascript.Context.call(Context.java:488)
at org.mozilla.javascript.ContextFactory.call(ContextFactory.java:504)
at io.apigee.trireme.core.internal.ScriptRunner.call(ScriptRunner.java:697)
at io.apigee.trireme.core.ScriptFuture.run(ScriptFuture.java:183)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
at java.lang.Thread.run(Thread.java:748)
-------
You need to install node.js on your machine.
If you do not have node.js installed then it will fall back to the Trireme Java-based JavaScript engine, which does not work very well and is resulting in that error
Managed assets needs to be inside app/assets. From the docs:
Compilable assets in Play must be defined in the app/assets directory. They are handled by the build process, and LESS sources are compiled into standard CSS files. The generated CSS files are distributed as standard resources into the same public/ folder as the unmanaged assets, meaning that there is no difference in the way you use them once compiled.
So, you need to move your files from public/css to app/assets/css.
I have a Rails and ExtJS application which has all images under
MyApplication/app/assets/graphics
The styles are listed in the following file->
MyApplication/app/assets/stylesheets/css/styles.less
The following file seems to have a compiled version of all styles
MyApplication/app/assets/stylesheets/css/lt.css
I added a new image test.png under graphics folder. How can I compile this into the styles? So far, when I refer to this image in my code, it doesn't show up since it is not in the lt.css file.
Thanks!
UPDATE
Sorry, I didn't see that you have css folder within stylesheet folder.
According to Rails Guide, If you have other manifests or individual stylesheets and JavaScript files to include, you can add them to the precompile array in config/initializers/assets.rb:
Rails.application.config.assets.precompile += ['admin.js', 'admin.css', 'swfObject.js']
SASS & LESS both uses asset helpers asset-url($relative-asset-path) except that SASS is equipped with rails by default, so you could use this helper in your lt.less or lt.scss ( file extension is important )
background: image-url('test.png');
Just change your lt.css to .less or .scss and the image will show up, and it will be precompiled for you, after using asset helper.
In case that you want to compile to production run this from your terminal before deployment:
rake tmp:cache:clear
rake assets:precompile RAILS_ENV=production
I hope it helps
I use rails 4.2.0 and compass-rails (2.0.2)
I have a css.scss file with
#import "compass/utilities/sprites";
#import "icons/*.png";
#include all-icons-sprites(true);
I have many image .png in app/assets/images/icons/XXX.png
I want deploy my app in production, it's work but with no assets, so I start
rake assets:precompile
in production environement.
An error occure:
rake aborted!
Sprockets::FileNotFound: couldn't find file 'icons/*.png'
I try to remove assets files in cache, nothing change.
details error: http://pastebin.com/6ggS3pP2
I think there is a problem with wildcard and path.
I try in dev ENV, nothing change...
I don't know what do more, what's the solution, plz?
to fix it, I just use mster branch of git like :
gem 'compass-rails', github: 'Compass/compass-rails'