In my Next 10 application, I can import global styles in _app.js like so
import 'assets/css/app.css'
I'd like to add a print stylesheet. I know I can use a #media print { } query to app.css, but ideally it would be loaded as a separate file so the download priority is lower, e.g.
<link rel="stylesheet" href="/assets/css/print.css" media="print">
Is this possible using Next.js? I can't see any obvious way to control how the actual <link> tag is rendered.
The only way I can see this might work is to have a custom bit of Webpack/file-loader configuration that matches print.css only, which feels... less than ideal.
I have the same question as you velvetkevorkian but with the intend to use the following technique:
<link rel="stylesheet" href="webfonts.css" media="print" onload="this.media='all'" />
This will indeed lower the priority in the loading queue, prevent rendering from being blocked and finally replace the native fonts by the webfonts.
UPDATE: not ideal but for my "simple" CSS file (which only defines font-face) here is what I did:
Move my webfonts.css file to the public folder
Manually add my <link> inside <Head>
Its possible, yes!
You can create Print.module.css in folder pages or anywhere, inside of this file you must use
#media print {
/* its an example */
.noPrint{
display: none;
}
}
Inside your file .js or .tsx you call this css like a
import print from './Print.module.css'
and call the className like:
className={print.noPrint}
if you have more stylesheets in your project you can differenciate like this:
import print from './Print.module.css'
import styles from './General.module.css'
and call the classes together, it goes like this:
className={`${styles.anyclass} ${print.anyclass}`}
this works too for responsive stylesheets, enough follow this logic with respectives media queries.
Related
Zoom websdk is used to integrate the zoom video platform into your application.
Here is the package for the same #zoomus/websdk.
All things are working fine for that video UI you've to import this CSS in your file. But the issue with this whole application is affected with this CSS and your styling is disturbed when you import this line to the main file.
import "#zoomus/websdk/dist/css/bootstrap.css"
import "#zoomus/websdk/dist/css/react-select.css"
Check out zoom forum for the same.
To resolve this I do a little twist in that
First you've to create a separate component that contains a code for zoomsdk like getting the signature and init the zoom all of that stuff.
Don't import those zoom related CSS to the parent file instead of that will go with another method.
Here is the step you need to follow
Copy those css file from node_modules to public folder.
Install react-helmet or react-helmet-async
In the same component write this line of code
<Helmet>
<link type="text/css" rel="stylesheet" href="/zoom-bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/zoom-react-select.css" />
</Helmet>
One workaround can be to use React.lazy on its parent component.
I am using this temporarily until I find a complete solution to this.
import { ZoomMtg } from "#zoomus/websdk"; distors the ui for me. I am not importing the css. It does that automatically I think.
I use a link in my html. How i can copy code of this file to edit it?
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
Do you really want to edit a minified file?
It can be done but it's difficult.
Instead, put that whole address minus the .min in your browser's address field
https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css
and you should see the code unminified which you can then copy/save to your local system for editing. (on Windows this would be by right clicking the mouse/pad).
I am not sure whether you do want to actually edit this file, or whether you want to change some of its effects. If the latter you link to the file then put your own CSS in style element following and it will overwrite with whatever settings you have given.
You have to add your custom css style after it so it will overrite it.
In main html file you can just add styles right after <head> for example:
<head>
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
background-color: red;
}
</style>
So what happens now it imports bootstrap styles but after that overrides it so you can add your custom styles inside <style>
You can simply open the url - https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
and save (ctrl+s) the file locally in your project and include the css file path with the help of this tag given below :-
You can also use custom css and then overide the css.
(Note :- Format the document/css file then you can edit the document)
By default, Angular 2 compiles the CSS into JavaScript, especially when using WebPack as in Angular-CLI. I would rather this not happen for a couple of reasons.
The first reason is that when I'm developing, I find it really helps to be able to see in the developer tools exactly what style sheet a specific style rule was coming from and what line number it was on. The second reason is that I think compiling CSS into the code kind of misses the point of good CSS, which is that you can apply a different style sheet and have an entirely different look and feel with the same markup.
Is there a flag somewhere that I can set to leave the CSS in .css files, where IMO it belongs?
This is the whole point of encapsulated components.
A component should have it's own styles encapsulated with it so it can be shipped with the styles.
Imagine you want to publish one of your components to be used by others, shouldn't it have its own styles with it ?
That means Angular needs a way to link those css to the component , thus seperates them into chunks and injects them into head tag.
To solve your problem though , you have couple of options :
1- Not using the Emulated Encapsulation :
Components by default have a property called encapsulation which is set to Emulated , you need to change it to None:
#Component({
encapsulation:ViewEncapsulation.None
})
Then , you can put all you css in the head tag your self like you'd do with a normal html page.
2- If the problem is theme ing , you can make your component themeable .
You can have a theme attribute for your component and then based on that change the styleing :
#Component({
selector:'my-component',
styles:[
`
:host{
[theme="blue"]{
change what ever you want :
h1{
color:blue;
}
}
}
`
]
})
And then , using this component would be like :
<my-component [attr.theme]='"blue"'></my-component> // would be blue theme
<my-component></my-component> // would be default
Go to your base Html file(where the root module, main app is injected) and link the CSS stylesheets in your header section.
Webpack will not include it in it's compiled/combined css file which is injected into the page. The css file will still be included at run time in the browser.
<html>
<head>
<base href="/">
<meta charset="utf-8">
<title>dummy</title>
<meta name="viewport" content="width=device-width">
//was not injected/modified by webpack
<link rel="apple-touch-icon" sizes="57x57" href="app/images/apple-icon-57x57.png">
//webpack's injected this below from other components's imported/inline css rules
<link href="index-c2cacb5fa3dfbca6116f4e4e63d5c3c7.css" rel="stylesheet"></head>
With angular-cli 1.6.5 you can do this:
ng serve --extract-css
You will still have the style-encapsulation features, but devtools will now point to the component css source file.
I use the angular-cli as well (v1.0.0-beta.22). When I am ready to build for production I run the following command:
ng build -prod -aot
This generates all my production-ready files (bundled, tree-shaken and minified etc). Of particular note is that it will generate two versions of the style sheets.
One in js:
styles.b2328beb0372c051d06d.bundle.js
And another version is plain css:
styles.4cec2bc5d44c66b4929ab2bb9c4d8efa.bundle.css
I run some post-processing on the css file with gulp and use the css version for my production build. I am not sure if the same holds true for lazy loading (where the cli will produced different chunks), but it works for sure when lazy loading is not being used (I haven't launched a production-ready project yet with lazy loading).
I also tried a build with JiT compilation:
ng build -prod
It also produced the raw/minified version of the css style sheet.
Now, I know for sure the folowing does NOT work:
ng build
This will produce all the css embedded within js file, styles.bundle.js.
Since you want to use the raw css file during development, the only workaround I can think of is that you run ng build -prod in order to get the css file. Copy/paste this manually into your assets folder. Run "format" on the file to un-minify the file. Then do a normal build with a modified index.html file referencing your raw css file, and removing the styles.bundle.js script reference. Not pretty, but it might work.
Put a wrapper class in html example-
<div class="component-1-wrapper">
all yout html here inside component-1-wrapper
</div>
Structure your sass(scss) in the following way. Since your styles are wrapped inside component-1-wrapper, therefore it will apply only to component-1-wrapperclass
.component-1-wrapper{
// all the styles for component-1 here
.class-hello{
// styles
}
}
You can compile your css with sass and put all the css(seperated by modules) in seperate folder.Start the filenames by _, sass can import them:
You can refer your styles-main.scss in app.ts file
#component({
styleUrls:['styles/styles-main.scss']})
The style-sheets will be structured this way and individual component's class styles will be applied to particular component since there is a wrapper class in html
Hope it helps!!!!!!
I'm currently creating a new WordPress theme based on the foundation them '_s'.
Could somebody explain to me how I can split up my style.css file into several to make them easier to manage? For instance, I'd like to have a layout.css, typography.css and other.css file stored within a /css folder.
How do I set this up. Presumably I need to add something to the header.php file?
Just include them via <link /> elements in the header.php template file.
Failing that, you can always use the CSS #import function:
theme.css:
#import url("layout.css");
#import url("typography.css");
/* Other styles here: */
body {
margin: 0;
}
"Just include them via elements in the header.php template file (under or before the the main stylesheet, depending on hierarchy)."
As the first answerer said.
"Avoid the #import directive"
As Google Webmasters say ;)
[ https://developers.google.com/speed/docs/best-practices/rtt#AvoidCssImport ]
EDIT ↓
However, I don't recommend using more than one stylesheet, since more stylesheets, mean more HTTP Requests and mean lower page speed performance.
I developed an application, and I used header and footer from another app. I created a separate style sheet for my app, called TestStyleapp.css. When I run my new application, the stylesheet I used from the other app is overriding my new CSS file.
Is there a way to include/reference the Teststyleapp.css (I tried calling it last) other than using !important in front of all the elements in teststyleapp.css?
When I use FireBug, I do not see Teststyleapp.CSS at all.
Even if it is LAST, if it is NOT more SPECIFIC (the other page items are more specific) it will not override what is above it in the stack.
Example:
div .myclass (background-color: red);
other (yours has)
.myclass(background-color:green);
you still see red.
<link rel="stylesheet" href="TestStyleapp.css" type="text/css" media="screen" />
It should be linked as such, between the head tags. Make sure the case is correct. I like using all lowercase and _ as a word separator. Just my personal style.
First, get the .css file to show in the NET tab in Firebug and we'll take it from there.