I just started a new Svelte app, and now when I make changes, rollup throws an error with whatever the first CSS rule I put in a module, like this:
[!] (svelte plugin) ParseError: Expected }
src\Register.svelte
1: form.svelte-1ietpyf{right:0}
If I kill the rollup process and restart, it works temporarily, but its kind of annoying. Has anyone else seen anything like this?
Edit -- for clarity, i should add in some of the sample CSS:
<style>
form {
right:0;
}
</style>
I've run into the same issue, and I've found a workaround.
If you remove the css function in the rollup config's svelte options, it won't pass the css to the svelte compiler again (the issue is that the css is being processed as svelte code, but it's already compiled as css).
Maybe rollup is taking the outputted css file as an input file (unsure how exactly rollup works though).
So removing the css function will solve your issue :)
Related
I'm new to the whole JS/webpacker game and am failing to understand how to import and use a javascript package using webpacker.
I am trying to include and use the Animate On Scroll Library.
I have Webpacker installed and working (I know it's working because I am able to happily use StimulusJs).
Here's what my /javascript/packs/application.js file looks like:
import {
Application
} from "stimulus"
import {
definitionsFromContext
} from "stimulus/webpack-helpers"
import {
trix
} from "trix"
import AOS from "aos"
const application = Application.start()
const context = require.context("controllers", true, /.js$/)
application.load(definitionsFromContext(context))
AOS.init();
I have my javascript_pack_tag included on my application.html.erb as
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', defer: true %>
I imported the required css files using my /assets/css/application.scss with #import 'aos/dist/aos'; so that shouldn't be the issue.
When I try and use the AOS package by doing something like <h1 class="text-center" data-aos="fade-in">This is a header.</h1> nothing happens. What am I missing?
Thanks.
Upon reading this again I guess it's more a JS issue you are encountering. I'll leave my points about the CSS below in case useful. See the fourth point about webpack-dev-server if you aren't using it already. Does your browser support defer? You could try moving the scripts to right before </body> to see. I'd probably just cut-to-the-chase and set a javascript breakpoint in AOS.init() and see what's happening.
A few points I've leaned recently to help better understand webpacker/css/sprockets...
First, the CSS in the assets folder is outside of webpack. It's sprockets. That's not a problem but often mixing the two presents challenges.
At the very least you'll need a stylesheet_link_tag 'application'... in addition to the pack tags.
Second, is AOS added via yarn or is it a gem? Gems with webpack can be a bit tricky. I and others I encountered gave up trying to use gem assets in webpack. Best to stick to yarn/npm modules for webpack. Otherwise, move all the assets into the sprockets pipeline (ie in the assets/ folder) and use that for this portion of your site. (it's ok to mix them, just keep them separate).
Third, if the AOS module is added via yarn add ... (ie it resides in the nodule_modules directory) then try replacing the CSS import to just
#import '~aos';
This works because node_modules is in the search path and if the plugin folder has a package.json manifest and it includes a "style" entry, it pulls the css file path from there.
Third, you can try moving the CSS to webpack. Try this...
Make an application.scss file in your components subfolder
Add to your packs/application.js file: import '../components/application.scss
Add a stylesheet_pack_tag 'application' .... to your layout
Put your css imports (from node modules) in your new application.scss
Fourth: Use bin/webpack-dev-server. This compiles webpack on the fly whenever any of your source files changes instead of on every page load (saves you a lot time). Since your CSS is now under webpack, it will give you errors if the import isn't right (though sprockets should do this too in your server logs).
Good luck! It gets easier and yarn/webpack is cool, better than the old ruby-gems-for-front-end-components, IMO
I'm using CKEditor via the 'rich' gem for Ruby on Rails.
It has historically worked fine, but at some point my editor icons started looking like this:
I'm not sure what caused was, whether I upgraded something or what.
(I do know that it's not a browser-cache issue.)
How I can fix these icons?
The code:
This is the HTML for the Bold button's span element (whitespace added for readability):
<span class="cke_button_icon cke_button__bold_icon"
style="background-image:url(http://localhost:5000/assets/ckeditor/plugins/icons.png?t=E4KA);
background-position:0 -24px;
background-size:auto;">
</span>
And the styles as interpreted by Chromium:
In that last line, url(icons.png) actually resolves to http://localhost:5000/assets/ckeditor/skins/moono/icons.png
What I can see but don't know how to resolve:
There are two different icons.png files at play here:
<gem_path>/vendor/assets/images/ckeditor/plugins/icons.png
(works correctly with background-position offset -24px)
<gem_path>/vendor/assets/images/ckeditor/skins/moono/icons.png
(is calibrated for a different offset value)
In the code snippets, you can see that the CSS specifies offset -24px, thus the first image is the correct one. The inline-element style specifies the first image, but is overridden by an !important-ified url(icons.png) which loads the second image (which is wrong).
Why the heck is it doing that?
Can I somehow fix this without forking the gem? (I can fork the gem, but I'd rather not maintain a separate fork if possible.)
Add below CSS in the application.html.erb file
.cke_ltr .cke_button_icon {
background-image: url('/assets/ckeditor/plugins/icons.png?t=H5SC') !important;
}
In my ASP.NET MVC 4 app, I have an index view that has several partial views embedded in it. I installed latest version 1.6.1 of Rotativa via NuGet. Now I can print the index page to a PDF using Rotativa. I would like to have a page break in the PDF after every partial view. How can this be achieved using Rotativa?
I tried to follow this example to use CustomSwitches but there does not seem to be one for page break. I used this article to generate the PDF
If you are using 1.6.1 you can just add the page breaks in the CSS (this does not work consistently in 1.5.0, I have not tested 1.6.0)
So add this style, not to a specific element like p.breakhere{...} but as shown below (some folks had issues on a specific element)
<STYLE TYPE="text/css">
.breakhere { page-break-after: always }
</STYLE>
Then in your html just do this
<P CLASS="breakhere">
And it should break nicely. Do be aware that 1.6.1 has a bug with Ghosted images, intermittently...
See this SO entry Link
The answer is correct but you have to do it in a different manner like:
<div style="page-break-after: always;">Content before page breaks</div>
<div>Content after page breaks<div>
This does the trick!
Hope that helps!
You can use any of this three CSS code to set the page break for an element,
page-break-after
page-break-before
page-break-inside
According to your situation.
This works every time for me and in all browsers. My application is ASP.NET MVC3 Razor.
In your style sheet (.css) or in a style tag put this:
#media all { .page-break { display: none; } }
#media print { .page-break { display: block; page-break-before: always; } }
Where you want your page to break put this:
<div class="page-break"></div>
Works perfect in all browsers
I found 1.6.1 works locally, but hosted on 2012 R2 windows, a QT 6.2 incompatible version breaks the generation of the application so this was not the solution for me. Instead, i ended up forcing a large margin-top in my css and then that actually forced my content to the top of the next generated page consistently, and therefore achieved my requirement. Strange, but it worked.
Qt: Untested Windows version 6.2 detected!
Error: Failed loading page https://a.b.co.uk/c/d/1(sometimes it will work just to ignore this error with --load-error-handling ignore)
Added this and it force made my new page for the content i needed it to...
<div class="row-fluid page-break" style="margin-top: 800px;">
I think a page height in pixels is 824px, so this pushes it over. It's a workaround, but i've just spent a few hours trying to get this to work, and was about to change Rotativa for another solution, but this was a easier option.
I am trying to use jquery UI based transition sliders on my homepage. I tried different jquery plugins but I always get an error in the console : jQuery is not a function or some function error related to jQuery . Plugins i have tried are Lof JSliderNews 1.0,featured-content-slider, etc..
Even after following several posts on the web , iam not able to make the plugin work at all. Jquery part doesn't work. I have used carousels and other plugins with jquery.noConflict but this time nothing works!
Here's what iam doing:
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
I also tried replacing all $ with jQuery in the included scripts but that too doesn't work in magento. Please help, i need to finish the project soon
Have you tried putting all the jQuery stuff into a function and map the window.jQuery variable as an argument? Like so:
(function($){
//... do your jQuery thing here
})(jQuery);
BTW: "jQuery is not a function" might also be a hint that you forgot to load the jQuery library into your project.
Do you have "JS file merging" enabled? If yes, try to disable it, clear your cache and try again. It helped me once when I had a smiliar issue.
Regards
I am attempting to have a image render in the background of a div with the class head.
My application view is written Haml and the body is defined as follows:
%body
.container
.head
.sixteen_columns
.top-nav
Included in my application stylesheet is:
.head {
background-image: url(/images/background_image.jpg);
width: 100%;
height: auto;
}
I have tried a number of variations to specify the path of the image and altered the image name several times but to no avail.
What is the issue?
Consider using the asset_path helper when referencing images in your stylesheet. Documentation may be found here (check out 2.2.1)In the context the CSS you listed you would heave
.head {
background-image:url(<%= asset_path 'background_image.jpg'%>);
width:100%;
height:auto;
}
Note: This requires that your style sheet be an erb.
Doing so offers a number of advantages over explicitly stating the path, one being that as the structure of rails application changes with new version releases, you will not need to change anything in your code in order for that image to be referenced properly.
This may seem like overkill just to reference an image but it's one of the many conventions of Rails that are difficult to get used but great! as your application grows and changes, hopefully enabling it to better endure the test of time.
Assuming you're using Rails 3.1 or beyond, and that you're using the asset pipeline properly for your images, you can include your image file by doing the following:
.head {
background-image: url(/assets/background_image.jpg);
width: 100%;
height: auto;
}
The reason for this is because of the way the asset pipeline works. It compiles your assets at run time and it places all of your assets in a folder called /assets/. It also ignores subfolder structuring and it just dumps everything into the root /assets/ folder, not /assets/subfolder/.
Try running
rails -v
from the console to confirm what version of Rails you're on.
It sounds like you're running a rails 2.x application, correct? That should mean that you're serving images, js etc from the /public directory. One important gotcha that tripped me up setting background images in css is that the paths you specify are relative to the directory the stylesheet is in(e.g /public/stylesheets), not the root directory of the project itself.
Have you tried changing the path to go up one directory from where the stylesheet is located?
.head {
background-image: url(../images/background_image.jpg);
width: 100%;
height: auto;
}
EDIT: What other paths to the bg image have you tried?
Some other possibilities could be:
background-image: url(images/background_image.jpg);
background-image: url('../images/background_image.jpg');
One other thing to check would be to load the view and examine the div in Google Chrome using the inspector (Ctrl Shift + I). Select the div and examine the styles Chrome is assigning to it.
Also, double check that it's still named background_image.jpg Can't tell you how many times I've gotten burned by some typo I overlooked ;)
Solution:
It turned out to be a combination of two things. I used this format for the background image:
background-image: url(../images/background_image.jpg);
However, the .head div was renbdering with a height of 0. I added a fixed height to test, and it all showed up perfectly. I can work with this from here.
Thank you all so much for the help!!
In rails 4 you can now use a css and sass helper image-url:
div.logo {background-image: image-url("logo.png");}
If your background images aren't showing up consider looking at how you're referencing them in your css files.