Trying to use #import url('myfile.css'); in my css file in Adobe AIR but it's not working.
I have tried variations such as url('file:///myfile.css') and url('file:///abs/path/myfile.css') and none of it seems to be working.
It works for me, simply:
#import 'myfile.css';
If this doesn’t work (remember, that the path is relative to the CSS file, or HTML document if it’s in a style tag), try using the app:// prefix, because that’s the correct path to your projects document root.
Related
I'm trying to define a css layer's stack in a custom.css file of a Blazor WASM project using VS 2022, but when it comes to define it, VS start complaining that "layer" is not a known "#" directive.
This is an excerpt of the affected code:
effected code portion
I've tried to search the web for a solution but found early nothing.
Is there someone that came across a similar issue and can help?
Thanks
#H.H, you're right. Using the url property of the #import rule and fixing some wrong CSS's relative paths, it's now working as a charm:
#layer vendor, blazor;
#import url('bootstrap/bootstrap.min.css') layer(vendor.bootstrap);
#import url('https://fonts.googleapis.com/icon?family=Material+Icons') layer(vendor.material-icons);
#import url('../_content/Radzen.Blazor/css/material-base.css') layer(vendor.radzen);
#import url('app.css') layer(blazor.app);
Now the 3rd party CSS are layerd as expected and my custom.css (unlayerd) takes the precedence.
For background, I am trying to load SVG icons in my react app and am using the object tag so that I can manipulate the color of the icons easily.
In this guide, they say:
If you want to use external styles, which are mostly much easier to work with and maintain, you can’t use or background-image. If you are using you need to reference your stylesheet internally from the SVG file (see code following). Remember: if you do this the SVG will also not be able to know what its parent class is (i.e. the ) so don’t try to use that in its styling. Inline SVGs don’t need this added and therefore can be slightly easier to work with in this sense.
and provide this code example:
// Add to very start of SVG file before <svg>
<?xml-stylesheet type="text/css" href="style.css"?>
// In style.css
.firstb { fill: yellow; }
.secondb { fill: red; }
To give you an idea of how my files are organized, my src folder contains an assets folder along with my components folder. My style.scss file lives within the src folder as well.
I'm having trouble figuring out what to add to the top of my svg files. My understanding of sass is that it would usually compile style.scss to style.css, however, when I look at my sources in dev tools it shows that style.scss is being loaded directly. Is this just because I'm still in development mode?
Anyways, I've tried the following (none of which have worked):
<?xml-stylesheet type="text/css" href="./style.scss"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<?xml-stylesheet type="text/css" href="style.scss"?>
It would be a huge help if anyone knows how I can get this to work! Let me know if there's any other information I can provide. Thanks so much!
You are correct to assume that you'd need to compile style.scss to style.css, so first ensure that only the CSS is being referenced in the SVG. This is the most straightforward way to get this to work, but a better solution would be to import your styles once in your root HTML template instead.
Now, if you're using React it's likely that you're also using a bundler such as webpack. You can tell bundlers like webpack to handle non-JS imports such as Sass files by using loaders. There is a sass-loader for webpack that will allow you to import Sass files, however you may also need to add the svg-inline-loader so that you can import the SVG directly.
I think with both loaders, what will happen is that webpack will start bundling your React app, see that an SVG is imported, grab it and see that it is referencing a Sass file, grab the sass file and compile it, and then output the styles in your index.html file. Please let me know if this solution works for you!
I found a workaround. Not exactly what I was hoping for, but it works for me.
There's a react-svg package that handles an ajax request and pulls the svg in as a normal svg tag. This allows me to edit with my sass file.
https://www.npmjs.com/package/react-svg
I was looking for an easy way to prefix a style sheet and sass works just great. I don't need any building tool, just vs code sass extension, and press watch.
What I did was, renamed the css to scss and then imported it inside the main style nesting in the selector I want, like:
#wrapper {
#import 'style1';
#import 'style2';
}
The issue comes when one of the files has #font-face, they also get prefixed and that is a problem. I checked the issue tracker and apparently this is the correct behavior.
https://github.com/sass/sass/issues/2442
Given that. I am looking for a way to import only the #font-face rules to the root instead of the #wrapper selector.
Is this possible without having to change the content of 'style1' or 'style2' ?
I was able to get around this problem with node sass magic importer.
But again you need node scripting and terminal, but can be mitigated with a bundler which kinda is not what I want but at least I can sort of prebuilt it and still use a watcher.
But given the hasle to set this up for such a simple thing I would just go to the style sheet and copy the font-faces to the root of the main file anyways.
If anyone knows a solution with sass only please reply.
What is the best way to integrate many CSS files to one integrated CSS file as global CSS?
We can supposed that every page has own CSS selectors with attributes.
If we simply copy and paste all css files into one file, the problem is that a.html will call b.html, c.html, d.html, ...., z.html css selectors and attributes even the page doesn't need call other CSS styles.
Is there any solution??
Caution when use #import, it increases the load time. New researches show that it's better to have ONE big css file than SIX small.
Problem with #import is, the download of the second file may start only when the first has been downloaded, which may cause glitches.
You can create a big file and use a compressor, like http://gpbmike.github.io/refresh-sf/
Of course, save it as style.min.css, let's say, and keep a backup of your style.css ;)
Take a look here too: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
use #import https://developer.mozilla.org/en-US/docs/Web/CSS/#import
master.css
#import 'a.css';
#import 'c.css';
a.css
el { style : lalala; }
b.css
el2 { style : lalala; }
If it possible to use #import in a .css file to load a style sheet from another site? Specifically, I have a main style sheet for my site which loads in other (local) style sheets using #import. I'd also like to load in a jquery ui theme hosted by google, e.g.
#import "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css";
This does not seem to work - I wanted to check whether this is allowed before working out exactly where the problem is.
That should work. Are you sure it is not loaded? What browsers does this happen in? Can you confirm using Firebug?
There is no mention of it not working in the w3 specs nor in the related MSDN Article (The latter applies to IE only of course).
According to those specs, adding url(...) around the address is optional, but try whether that yields better results.