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;
}
Related
I'm implementing Bootstrap 4.4 in a Rails 6 app using Webpacker and the theming isn't working in production.
I overrode some Bootstrap variables and put the custom theming in a separate file called bootstrap_variables.scss. I made sure to import Bootstrap's functions before the custom variables in the app/assets/stylesheets/application.scss file as outlined here and here.
#import "bootstrap/scss/functions";
#import "bootstrap_variables";
#import "bootstrap/scss/bootstrap";
When I run the app locally it works fine. When I try to push to production (Heroku) the build fails and I get the following error:
SassC::SyntaxError: Error: argument `$color` of `darken($color, $amount)` must be a color
on line 181:43 of app/assets/stylesheets/bootstrap_variables.scss, in function `darken`
from line 181:43 of app/assets/stylesheets/bootstrap_variables.scss
$link-hover-color: darken($link-color, 15%) !default;
That references the following lines in the custom bootstrap_variables.scss file:
$link-color: theme-color("primary") !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
Why might this be working locally but not in production?
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
i'm attempting to include fontawesome (fa) in my grails 3 project. I saw for grails2 there was a plugin for this, but the configuration and explanation for how to install this plugin didn't seem to work in grails 3.
So I tried to add fa more or less manually by creating an assets/fonts/ directory, and placing the fonts in there, added the css to my stylesheets directory and referenced it from the application.css. When I run in Idea via grails run-app all the fa resources show up fine.
However when I package a war file to run in tomcat, none of the fa resources show up at all. When I look at the compiled style sheet that is created for the app, the ../fonts/ that I put in my fa style sheet has been removed, and then the font files can't be found.
#font-face {font-family: 'FontAwesome';src: url('fontawesome-webfont-32400f4e08932a94d8bfd2422702c446.eot?v=4.5.0')
This generated font resource, and all the others are not resolvable(404) from the root of my application, but are resolvable if I prepend /assets/ to them.
What am I missing configuration wise with the asset pipeline to get this working?
As mentioned in the comments you can use the Grails 3 bootstrap-framework hosted on GitHub https://github.com/kensiprell/bootstrap-framework
Works like a charm.
Create a folder called 'fonts' in grails-app/assets. In this folder place the unzipped content containing font-awesome files. You should have something like:
grails-app
|__assets
|__fonts
|__css
|__fonts
|__less
|__scss
....
Then, for the asset pipeline to know the new directory, reference it in the build.gradle file. You should have something like:
assets {
minifyJs = true
minifyCss = true
includes = ["fonts/*"]
}
Download Fonts from this link enter link description here and in that add Fonts folder only to assets in grail app.Add below code:
assets {
minifyJs = true
minifyCss = true
includes = ["fonts/*"]
}
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.
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"