I am on Rails 3.2 with assets pipeline.
I'd like to inline some minified css in a javascript string (to dynamically include it from a JS library I'm writing). My css is written using scss and my js using coffeescript.
Do you know how to do that?
I would go with #meagar to have a CSS and a JavaScript file.
However, if you really want to get it through javascript, you can add a async get call (like $.get) and handle the response as your new string. Ugly, hum?
Yet another option is to generate the CSS output and put it manually in your javascript, or better yet, loading it in your coffeescript file like this:
for filename in list
do (filename) ->
fs.readFile filename, (err, contents) ->
compile filename, contents.toString()
(exemple from coffescript.org)
Related
I found next code fragment on the Rollup api page.
If I would be using iife instead of amd.
How would Rollup define this in the bundle?
Or would it expect a preceding <script> tag containing that external code? If the latter would be true: Is there a way to produce a bundle with JS code which dynamically loads JS files through absolute URLs?
Try it. You'll see it generates code like this:
(function (d3) {
'use strict';
d3.selectAll('p').style('color', 'purple');
}(d3));
In other words yes, it expects there to be a <script> tag on the page that defines d3.
Is there a way to produce a bundle with JS code which dynamically loads JS files through absolute URLs?
That's exactly what the amd output is. You just need to have an AMD module loader such as require.js or curl.js on the page.
In my project when I add <sx:head></sx:head> it is including some required javascript and css( /project/struts/xhtml/styles.css ) files to implement Ajax. I don't want css files to be included (I have my own defined css) because it is changing my page format.
How to do that?
I have a Coffeescript view, something like widget.js.coffee which needs to include jQuery, as I can't be sure that jQuery is available. This idea is for other people to use the JS file, e.g.
<script src="http://my.rails.app/40/widget.js"></script>
My app already has jQuery via the asset pipeline, so I want to do the equivalent of the application.coffee manifest, where I can simply say something like:
#= require jquery
So far, it looks like I can output jQuery via so:
<%= Rails.application.assets["jquery"].source %>
but this seems to break the Coffeescript code (looks like there are backticks in the jQuery source).
I'm not sure the best way to proceed. Any thoughts on the best way to do this?
Make a .coffee file in the asset pipeline that includes all the libraries you require. Let's call it "widget.js.coffee" and it lives in assets/javascripts
In your controller, pull the generated source like so:
code = Rails.application.assets['widget'].source
Compress it
#js_libraries = Uglifier.compile code
Use it in your view. If your view is coffeescrtipt, make sure it is enclosed in backticks
<%= raw #js_libraries %>
I am working on a sort of CMS project where I am leveraging SCSS. I would like to allow the user to specify properties of a stylesheet in a simple way (enable a few color customization), and then generate a CSS file based on SCSS templates, and substitute some variables in the SCSS file using mustache or ERB evaluation.
Basically, I want an ERB file to be rendered as scss file, and then generate a css in my application, upload it to S3, and include in the user's layout.
If possible I would like to avoid using css.erb files :-)
I fact (I am answering my own question). What I am trying to do is really easy. I've made this really simple script:
#!/usr/bin/env ruby
#processs.rb file
require 'sass'
result = Sass.compile open(ARGV[0]).read
puts result
And it generates css out of a scss file she invoked like this:
ruby process.rb myfile.css.scss
And this works perfectly. The code documentation in sass source code helped me to find this out.
I'm trying to allow the user to customize my application using YML files.
When the user updates certain things the CSS needs to be updated as well.
I'd like to solve this problem using dynamic CSS instead. The way I was planning on doing this is to have a settings SCSS file which the other css files import and use.
Here is what I have so far:
settings.scss.erb:
$width: <%= Rails.application.config.width %>px;
main.css.scss:
//= require settings
#import "settings";
#main {
width: $width;
}
But I get this error:
Invalid CSS after "$width: ": expected expression (e.g. 1px, bold), was "<%= Rails.appli..."`
So It seems that the settings are not being passed through the erb parser before being handed off to the SCSS parser, is there any way to solve this.
I'd rather not put everything in .erb files since my text editor doesn't support (syntax highlighting and commands) when having scss in erb files
Side stepping the problem where ERB is not being parsed, you are not going to be able to customize the CSS dynamically (I think the main file may require an erb extension). The asset pipeline is designed to serve assets in a way that tells browsers that the are static and are not going to change.
Assuming the erb parsing was working, the width would be rendered during the precompile phase, or on the first request. If you are using Sprockets far-future headers are set to tell the remote clients to cache the content for 1 year. And Sprockets only picks up changes if the timestamp of the file changes, so would never get any new values.
You could force Sprockets to dynamically serve every request, and to not send any headers, but it is not really designed for this and there are significant performance risks in doing so.