I'm manually compiling Sass in a Rails 4.2 app, and I'm running into issue with Sass' #import. It's giving me the following error - "File to import not found or unreadable..." Here's a code snippet.
scheme_css_dir = "#{Rails.root}/app/assets/schemes/#{scheme}/css"
template = File.read("#{scheme_css_dir}/styles.css.scss")
engine = Sass::Engine.new(template, {
:syntax => :scss,
:cache => false,
:read_cache => false,
:style => :compressed,
:load_paths => [scheme_css_dir]
})
output = engine.render
styles.css.scss contains several #import statements, and it's failing on the first one. Here's what the first one looks like.
#import "./flexslider";
There is a flexslider.css.scss file in the same directory as style.css.scss. I'm supplying that directory in the :load_paths option. Interestingly enough, if I change the #import line to...
#import "./flexslider.css.scss";
...then it gets to the next #import line in the file - where it throws the same error. This style.css.scss manifest complies successfully during deploy as is (without adding extensions to all the #imports).
What am I missing? Is there additional config that I need in order to use Sass::Engine to compile css manifest just like Rails would during deploy?
FYI - I'm using the latest version of sass-rails (5.0.3).
Any help is much appreciated. Thanks!
UPDATE: Thanks to papirtiger's comment, I was able to resolve the issue with #import by updated the extensions of my files from .css.scss to .scss. However, I'm still running into errors with asset helpers - specifically image-url and font-url. Here's the error I'm seeing...
undefined method `[]' for nil:NilClass
The error occurs in a sprockets_context method in sprockets (3.1.0) lib/sprockets/sass_processor.rb
def sprockets_context
options[:sprockets][:context]
end
Any thoughts on how to get pass this hurdle?
Related
it's my first time to compiling a ruby on rails 2.0, and I have a problem with the variables in _vars.scss. The scss files are located in vendor/assets/stylesheets/scss (I located them here because was the only way they worked!) and they are calling them up in app/assets/stylesheets/application.css.scss:
#import "scss/bootstrap.scss";
#import "scss/vars.scss";
#import "scss/styles.scss";
#import "scss/fonts.scss";
#import "scss/icons.scss";
#import "scss/helpers.scss";
The problem that showed up is:
rake aborted!
Sass::SyntaxError: Undefined variable: "$screen-sm-max".
(in /var/rails/DeterminaRASIntegracio/releases/20180414113247/vendor/assets/stylesheets/scss/_styles.scss)
Thanks
The error message is pretty clear.
Sass tried to find variable $screen-sm-max on file _styles.scss but failed.
Try to add
$screen-sm-max: 42;
on file _styles.scss.
And see if that solves the problem.
I'm trying to get vue2-dropzone (version 3.0.3) to cooperate nicely with my Rails 5.1.4 app. I've added Dropzone to to my form and loaded the module but somehow I am not able to see the default styles. I don't think this is a problem with vue2-dropzone as much as with how webpacker loads the css.
My current setup:
application.js
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.css'
const myForm = new Vue({
el: '#multistep-form',
components: {
vueDropzone: vue2Dropzone
},
data: function () {
return {
dropzoneOptions: {
url: 'https://httpbin.org/post',
thumbnailWidth: 150,
maxFilesize: 5,
dictDefaultMessage: "<i class='fa fa-cloud-upload'></i> Drop files here to upload",
headers: { "My-Awesome-Header": "header value" }
}
}
}
and my _form.html.erb partial:
<vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions">
</vue-dropzone>
I see that the Dropzone form is loaded. However, I cannot see the default style. I see the following in the console when I run :
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--1-2!node_modules/postcss-loader/lib/index.js??ref--1-3!node_modules/vue2-dropzone/dist/vue2Dropzone.css:
[0] ./node_modules/css-loader?{"minimize":false,"sourceMap":true,"importLoaders":2}!./node_modules/postcss-loader/lib?{"sourceMap":true,"config":{"path":"/Users/myuser/Documents/apps/myapp/.postcssrc.yml"}}!./node_modules/vue2-dropzone/dist/vue2Dropzone.css 30.5 kB {0} [built]
I don't think it's an error since it says webpack: Compiled successfully. but I do think that webpack isn't loading vue2Dropzone.css for some reason. How should I configure webpacker to load that css file?
If I put the css file manually into my app/assets/stylesheets/ then it works without a problem.
Thanks in advance!
I think your CSS file should be loaded in CSS and not in js.
Here's how I'm doing it in my project.
Create application.css in packs folder and import into the Rails layout file, application.html.erb
<%= javascript_pack_tag 'application' %>
#import 'vue2-dropzone/dist/vue2Dropzone.css'
If you do this though, you will get an error because #import is a sass syntax. So you will need to do some extra webpack config.
You will find this post useful if you want to use css inside the application.js file.
https://medium.com/#mayorsan/rails-angular-webpacker-gem-like-a-pro-7cf40a588ab9
Whenever I try to generate a pdf using to_file, the process will just hang, and when I stop the development server I get Errno::ENOENT (No such file or directory - path/to/pdf). However, I am able to render a pdf inline using to_pdf. I'm also able to generate PDFs from the command line in the same folder that I'm trying to generate them in with to_file.
I'm using Rails 3.2.12 and pdfkit 0.8.2. I've tried using wkhtmltopdf versions 0.9.6 through 0.12.4. I'm on Ubuntu 14.04.
Example from controller:
html = render_to_string(:action => "show.html.erb", :formats => :html)
kit.stylesheets << "{Rails.root}/app/assets/stylesheets/stylesheet1.css"
kit.stylesheets << "#{Rails.root}/vendor/assets/stylesheets/stylesheet2.css"
kit.to_file("#{Rails.root}/folder_to_write_to/generated_pdf.pdf")
Turns out the issue was the asset pipeline conflicting with wkhtmltopdf. Added config.threadsafe! to development.rb and it started working.
Another issue can be the default options passed. For example, when I left the default print_media_type option in place, found this message in the log:
The switch --print-media-type, is not support using unpatched qt, and will be ignored."
Only when I override that does it work for me, either in the initializer or like so:
PDFKit.new(html, {print_media_type: false})
The message says it'll be ignored, but it wasn't. It was causing the file to not get generated.
I'm working on a site builder in rails and I would like to render the sites css using Sprockets SCSS processors. Since the user can change colors and logos, I can't use Sprockets precompilation so I've started working on a Rails SCSS template handler to handle dynamic views.
The goal is to compile 'app/views/sites/show.css.scss' any time /sites/43543.css is requested. Here's what I have so far. You'll notice I first run the template through the ERB processor and then attempt to run it through Sprockets.
https://gist.github.com/3870095
Manuel Meurer came up with an alternative solution that writes the ERB output to a path and then triggers the Asset Pipeline to compile it. I was able to get his solution to work locally but it wont work on heroku because the asset path is not writable. Files can only be written to the tmp directory and those files are only guaranteed for a single request.
http://www.krautcomputing.com/blog/2012/03/27/how-to-compile-custom-sass-stylesheets-dynamically-during-runtime/
After a long day I was able to solve my problem thanks to John Feminella and his post on google. The challenging part for me was figuring out how to create a new Sprockets::Context. Luckily John's solution doesn't require a Context.
Updated gist here
Attempt #1
This code does not allow importing css files from the asset pipeline.
#import "foundation"; works because foundation is loaded as a compass module
#import "custom_css"; results in an error message saying the file could not be found
def call(template)
erb = ActionView::Template.registered_template_handler(:erb).call(template)
%{
options = Compass.configuration.to_sass_engine_options.merge(
:syntax => :scss,
:custom => {:resolver => ::Sass::Rails::Resolver.new(CompassRails.context)},
)
Sass::Engine.new((begin;#{erb};end), options).render
}
end
Attempt #2
This code fails to embed base64 urls using asset-data-url
def call(template)
erb = ActionView::Template.registered_template_handler(:erb).call(template)
%{
compiler = Compass::Compiler.new *Compass.configuration.to_compiler_arguments
options = compiler.options.merge({
:syntax => :scss,
:custom => {:resolver => ::Sass::Rails::Resolver.new(CompassRails.context)},
})
Sass::Engine.new((begin;#{erb};end), options).render
}
end
Attempt 3
Turns out you can use empty values while creating the context. Code below works in development but throws an error in production.
ActionView::Template::Error (can't modify immutable index)
It appears the error occurs in Sprockets::Index which is used instead of Sprockets::Environment in production. Switching to Sprockets::Environment doesn't solve the problem either.
def call(template)
erb = ActionView::Template.registered_template_handler(:erb).call(template)
%{
context = CompassRails.context.new(::Rails.application.assets, '', Pathname.new(''))
resolver = ::Sass::Rails::Resolver.new(context)
compiler = Compass::Compiler.new *Compass.configuration.to_compiler_arguments
options = compiler.options.merge({
:syntax => :scss,
:custom => {:resolver => resolver}
})
Sass::Engine.new((begin;#{erb};end), options).render
}
end
I added this line in my layout file:
<%= stylesheet_link_tag "bootstrap", "bootstrap-responsive", :cache => true%>
Which produces this error message:
Errno::ENOENT in Test#index
No such file or directory - Asset file not found at '/Developer/Workspace/MyProj/public/stylesheets/Developer/Workspace/MyProj/app/assets/stylesheets/bootstrap.css'
It appears to have concatenated the path to the folder twice before looking for the file. Is this a known issue with rails 3.2.3? Or is there some setting I mucked up?
try removing ":cache => true"
If you take a look at https://github.com/rails/rails/pull/6752/files#L0R40 you will see the line, which produces wrong path when cache or concat options are enabled. In this case paths will looks like "/Absolute/path/to/public/" + "/Absolute/path/to/asset/file.ext" which is wrong.
-- Rails pull request that seems to be related to your issue.