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.
Related
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.
The Sass team seems to have removed this capability in Sass 3.4 but Im trying to namespace the Semantic UI CSS library so as not to conflict with other libraries and its not working.
.semantic-namespace {
#import "semantic-ui-css/semantic.min.css";
}
and Im getting this error
error sass/semantic-namespace.scss (Line 3: CSS import directives may only be used at the root of a document.)
It seems to be saying I can only use #import at the top.
Found some docs from years ago but I think theyre too old and something has changed.
Name your inner file with an underscore, and ending in scss. .Yes, even if it's plain css, i.e. semantic.min.css → _semantic.min.scss
Have an outer File like so:
#main .content { // if that's, where you want them to rule only
#import 'semantic.min';
}
To cut the long story short, the syntax in next:
to import (include) the raw CSS-file
the syntax is without .css extension at the end (results in actual read of partial s[ac]ss|css and include of it inline to SCSS/SASS):
#import "semantic.min";
to import the CSS-file in a traditional way
syntax goes in traditional way, with .css extension at the end (results to #import url("semantic.min.css"); in your compiled CSS):
#import "semantic.min.css";
And it is damn good: this syntax is elegant and laconic, plus backward compatible! It works excellently with libsass and node-sass.
I downloaded a free HTML theme named dashgum from the internet. I'm implementing it for an Angular2 application using angular-cli. I converted the css files to .scss and pasted the code to the angular application. I then imported the files in the global styles file named styles.scss to apply the styles to the application like this:
#import url('./scss/bootstrap.scss');
#import url('./scss/font-awesome/css/font-awesome.scss');
#import url('./scss/zabuto_calender.scss');
#import url('./scss/gritter/css/jquery.gritter.scss');
#import url('./scss/lineicons/style.scss');
#import url('./scss/style.scss');
#import url('./scss/style-responsive.scss');
The problem that I'm facing during debugging is that all the styles appear as embedded styles in the browser like this (notice the style tag):
I want the style to appear as external styles while inspecting like in the theme. Please notice it in the following screenshot:
These are the default settings in Angular 2 as I made no apparent changes for the styles to appear embedded when inspecting. Is there any known way to change the settings in Angular 2 for the styles to appear as external styles when inspecting? The embedded styles make it harder for me to debug. Any help pointing out towards the solution would be appreciated.
My first advice (like official Angular CLI documentation says) is to put your global library inside .angular-cli.json like this:
...
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"styles.scss"
],
...
Then just run the app with the --extract-css parameter to see in the browser inspector the source files:
ng serve --extract-css
And you will have this:
I have learned that the styles imported in the global styles.scss file always appears embedded when inspecting in the browser. If we want the css to appear as external styles, we will have to use it in components.
Edit:
See toioski's answer above.
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.
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.