I'm using SASS(.scss) on a rails (3.2.13) project and use variables & mixins for my media queries like so:
$desk-wide-start: 1100px !default;
#mixin media-query($media-query) {
#if $media-query == desk-wide{
#media only screen and (min-width: $desk-wide-start) { #content; }
}
}
// I include the mixin like so
#include media-query (desk-wide) {
margin-top: 0;
}
This site is running and working fine live, but I have been working on it locally (Lets call this code B) and made a few changes and now my media queries (mixins) have stopped working (they appear to NOT be compiling). If I write a #media query, this will work however.
I rewound my changes through Git to the code I last deployed to the live site (lets call this code A), and the mixins worked, I swapped back to my changes (code B) and then back to the working code (code A) and they had stopped working on this as well.
I get no Rails errors, and I have hard refreshed / cleared the cache on both Chrome and Firefox (latest stable).
Any ideas what could be causing the mixins to not compile / work?
So far i've tried rolling back in Git (see above) and updating the sass-rails gem to the latest version, I can't think what else may be causing it.
This may help someone else in the future - I've resolved this by figuring out I had a gem that also had:
#mixin media-query($media-query) {
}
This must have been causing some kind of conflict when compiling, shame Rails didn't flag it up for me.
I simply changed one of the #mixins to #mixin mq($media-query)
Related
After upgrading from Vaadin 14.5 to 14.6 I'm facing problems with CSS that contains URL's that point to content.
For example, the following CSS no longer works:
:host([part="my-part"]) [part="reveal-button"]::before {
content: url("../images/my-image.svg");
}
It fails to "compile" when running the build-frontend goal of the Vaadin Maven plugin with the following error:
ERROR in ../node_modules/#vaadin/flow-frontend/styles/components/my-component.css
Module build failed (from ../node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../images/my-image.svg' in '<Project Path>\node_modules\#vaadin\flow-frontend\styles\components'
The same error appears in the browser if I try to run the project. This CSS has worked fine in all previous versions of Vaadin 14.
Has anyone encountered anything similar, or have any ideas as to what has changed that might cause this?
With the new custom theme feature the .css loader has changed from raw-loader to css-loader but it shouldn't touch urls outside of frontend/themes/[theme-name] or node_modules
Is the styles/components/my-component.css located in src/main/resources/META-INF/frontend, src/main/resources/META-INF/resources/frontend or src/main/resources/META-INF/resources to be packaged as an add-on jar or compatibility mode?
As in that case the css would end up inside node_modules which might make a difference to the resolving.
As a workaround if you are not building an add-on you should be able to move the css and image to {project_root}/frontend and it should build fine.
Until release of 14.6.2 you can add the raw-loader dependency to a java class with
#NpmPackage(value = "raw-loader", version = "3.1.0")
and then add to webpack.config.js the lines
if(flowDefaults.module.rules[2].test.toString().includes('.css')) {
flowDefaults.module.rules[2].use = [ {loader: 'raw-loader' }];
} else if(flowDefaults.module.rules[1].test.toString().includes('.css')) {
flowDefaults.module.rules[1].use = [ {loader: 'raw-loader' }];
}
Did you change the css structure to follow the new theme structure introduced in 14.6? It is not needed, but it is important context. I think it is at least related to your issue.
The path seems a little weird in your error messages, ending up in a node_modules folder. Could you share where this file is in, and what loads the file to your project?
With the new theme structure, I've used the following css to import images in css:
background: url('./images/fire.png');
And that was placed in a file: frontend/themes/mythemename/mythemefile.css
I am unable to get a Grails 2.5.2 application using the resources plugin to handle the cache-busting change made to CKEditor. The resources plugin is configured as follows:
grails.resources.adhoc.patterns = ['/js/*', '/images/*', '/css/*', '/plugins/*', '/thirdparty/*', '/templates/*']
grails.resources.adhoc.includes = ['/js/**', '/images/**', '/css/**', '/plugins/**', '/thirdparty/**', '/templates/**']
The CKEditor code is placed under app-dir/web-app/thirdparty/ckeditor and is currently at version 4.5.9. The cache-busting change was made in 4.5.5, and version 4.5.4 works perfectly with grails resources.
I get the following error in the console when running the app with 4.5.9:
GET resource:/thirdparty/ckeditor/skins/moono/icons.png?t=a35abfe net::ERR_UNKNOWN_URL_SCHEME
It seems that the resources plugin is not coping well with values in ckeditor's editor.css file (a file served by the app points to app-dir/thirdparty/ckeditor/skins/moono/editor.css?t=G4CD as http://localhost:8080/app-dir/static/thirdparty/ckeditor/skins/moono/editor.css?t=G4CD). If I look at this file directly, it contains the following for the icons.png and icons_hidpi.png files, indicating that the resources plugin is incorrectly replacing the image file link (all but the first, actually) with a "resource:/..." url that shouldn't need to be there, and hence the console error. Curiously, it is only the icons.png and icons_hidpi.png files with their t parameter that get changed in this manner, other image files in the same editor.css file are left alone.
.cke_button__bold_icon {background: url(icons.png?t=a35abfe) no-repeat 0 -0px !important;}
.cke_button__italic_icon {background: url(resource:/thirdparty/ckeditor/skins/moono/icons.png?t=a35abfe) no-repeat 0 -24px !important;}
.cke_button__strike_icon {background: url(resource:/thirdparty/ckeditor/skins/moono/icons.png?t=a35abfe) no-repeat 0 -48px !important;}
.cke_button__subscript_icon {background: url(resource:/thirdparty/ckeditor/skins/moono/icons.png?t=a35abfe) no-repeat 0 -72px !important;}
If I add the following configuration, the app runs and displays perfectly.
grails.resources.processing.enabled = false
If I use
grails.resources.mappers.cssrewriter.excludes = ['/thirdparty/ckeditor/skins/moono/**']
in an attempt to prevent resources from modifying ckeditor's editor.css file, nothing seems to change.
What can I do? I can't leave ckeditor at 4.5.4, as there is an interaction with it that I'm trying to fix. I'm already using the same configuration as recommended in another post, but that does not fix the problem. Disabling css rewriting altogether just breaks other plugins.
The eventual solution (recommended by a colleague) is to exclude the specific CSS file(s) from being processed by grails resources:
resource url:"thirdparty/ckeditor/skins/moono/editor.css", exclude: "*"
This avoids affecting other files that were either unaffected by the upgraded CKEditor, or benefited from the processing done by grails resources.
This one is not easy!
I'm building a page that switches between two locales AR & EN (RTL & LTR)
page is built using SCSS bootstrap v3.
having this as a fun fact:
http://sass-lang.com/documentation/file.FAQ.html#q-ruby-code
I already have all Boostrap files switch between left & right based on one single SCSS flag (ie. $flag-direction)
My main concern now is what to do with assets pipeline on Production environment ? things seems to work fine when switching between RTL & LTR flag.
But in production it only creates on version and then starts serving that version. Did anyone work around this ?
I always end up finding solutions like these: http://dolinked.com/questions/229493/maintain-rtl-version-of-stylesheets-with-rails-asset-pipeline
which are a little scary since it's too much of a work around. is there anything simpler ?
Thanks !
As I do understand you want compile all code into a single CSS file? Unless you change the Bootstrap code yourself, i expect that you will load many unused CSS code. If your are able to set the text directory of your HTML conditionally, you should also able to load your CSS file(s) dynamically and compile a CSS file for each text direction.
Otherwise you possible can use the nested #import feature of Sass:
With grid.scss:
#at-root body#{&} {
direction: $direction;
}
.row {
float: $float;
}
The following code:
.rtl {
$direction: rtl;
$float: left;
#import "grid.scss";
}
.ltr {
$direction: ltr;
$float: right;
#import "grid.scss";
}
compiles into CSS code as follows:
body.rtl {
direction: rtl; }
.rtl .row {
float: left; }
body.ltr {
direction: ltr; }
.ltr .row {
float: right; }
I'm new to Bourbon & SASS and trying to use the #font-face mixin to add a font I downloaded (Museo Sans) to my Rails 3 app.
Bourbon provides the following examples:
#include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Regular');
#include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Bold', bold);
#include font-face(SourceSansPro, '/fonts/Source_Sans_Pro/SourceSansPro-Italic', normal, italic);
// Rails asset-pipeline - place fonts in app/assets/fonts/
#include font-face(SourceSansPro, 'Source_Sans_Pro/SourceSansPro-Regular', normal, $asset-pipeline: true);
What I did:
// application.css.scss
#import "bourbon";
#import "fonts";
// fonts.css.scss
#include font-face(MuseoSans, '/fonts/MuseoSans/MuseoSans_500-webfont', normal, $asset-pipeline: true);
* {
font-family: MuseoSans;
}
The fonts are in assets/fonts/MuseoSans/ with filenames like MuseoSans_500-webfont.eot, .ttf, etc. I get the impression you can leave off the extension and Bourbon is supposed to pick up all the files.
I've tried a lot of different variants of the above to no avail. I know that Bourbon and the files are working because when I set the font-family to $helvetica I see a change on the page.
If anyone can provide the proper code, or a GitHub project that I could look at, I'd be much obliged.
Try removing the leading "/fonts" in your in your path like:
#include font-face(MuseoSans, 'MuseoSans/MuseoSans_500-webfont', normal, $asset-pipeline: true);
I had some issues working with this mixin as well - I would get IOerrors if the following files were not present in the fonts directory: "myfont.eot?#iefix" and "myfont.svg#myfont."
However, when I added those files, I found that they were not getting precompiled (i.e. they lacked a MD5 thumb print and weren't present in the asset manifest), so I decided to override this mixin and rewrite it using modified asset-path methods.
I am adding the following ScriptBundle in BundleConfig:
bundles.Add(new ScriptBundle("~/bundles/javascript").Include(
"~/Scripts/jquery-1.*",
"~/Scripts/load-image.min.js",
"~/Scripts/bootstrap.*",
"~/Scripts/bootstrap-image-gallery.*",
"~/Scripts/my.global.js"));
This is referenced at the end of my _Layout.cshtml as:
#Scripts.Render("~/bundles/javascript")
When debugging I notice that the output of this script rendering is:
<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/bootstrap-image-gallery.js"></script>
<script src="/Scripts/my.global.js"></script>
Notice the load-image.min.js script is missing? What I want is to use that same minified script whether I'm debugging or not. Under release conditions the script is included in the bundled JS file.
I assume it's seeing the 'min', looking for an un-minified version, not finding one, then deciding what's best is to ignore it entirely. Brilliant. If I make a copy of load-image.min.js, call it load-image.js and then reference it in BundleConfig as "load-image.*" I find it is included in both configurations but what's the point of having to do that?
I assume I'm missing something here. I don't have the un-minified version and I frankly don't care about it. It's used by my Bootstrap image gallery plugin and nothing else. Any ideas out there?
This behavior has been improved (fixed) in the 1.1.0-alpha1 release. We moved all of the old default ignore list entries into a new DirectoryFilter ignore list that are only used when including search patterns like *.js which was the origional intent for this functionality. As a result this should no longer be an issue when you are including individual files explicitly.
Note: the one place this might still be an issue is if you try to include something like jquery-{version}.min.js.
There is ignoreList, which you can clear if you need, it looks like:
public static void AddDefaultIgnorePatterns(IgnoreList ignoreList)
{
if (ignoreList != null)
{
ignoreList.Ignore("*.intellisense.js");
ignoreList.Ignore("*-vsdoc.js");
ignoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
ignoreList.Ignore("*.min.js", OptimizationMode.WhenDisabled);
ignoreList.Ignore("*.min.css", OptimizationMode.WhenDisabled);
return;
}
else
{
throw new ArgumentNullException("ignoreList");
}
}
More details: Advanced Options of ASP.NET Bundling and Minification