How can I preload an imported CSS file in a react component using the import statement the same way one can use the <link rel="preload" href="style.css" as="style" /> to preload CSS in a HTML file?
Related
I am building a Next.js application and starting with an HTML template. I have included the assets in my Head and _document.js file like so:
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content={keywords} />
<meta name="description" content={description} />
<meta charSet="utf-8" />
<link rel="icon" href="./favicon.ico" />
<title>{title}</title>
<link type="text/css" rel="stylesheet" href="css/reset.css" />
<link type="text/css" rel="stylesheet" href="css/plugins.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/yourstyle.css" />
</Head>
_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</Html>
)
}
}
These files load correctly on all my top level pages but for my dynamically generated posts the files do not load:
'Failed to load resource'.
Currently you can only import global CSS in _app.js shared between all your pages, or use CSS modules in your components (and also CSS in javascript file). But you can't import CSS specific to pages.
You can find examples in the documentation about CSS in Next.js.
To import a global CSS file in your _app.js, it's like in react, at the top of that file:
import "../styles/main.css";
For CSS modules it's the same but in your components, and it affects only that component:
import styles from "../styles/Home.module.css";
To have more details, you can read the RFC that implemented the current way CSS is supported in Next.js.
Here is a part of it:
Next.js will only allow you to import Global CSS within a custom pages/_app.js.
This is a very important distinction (and a design flaw in other frameworks), as allowing Global CSS to be imported anywhere in your application means nothing could be code-split due to the cascading nature of CSS.
This is an intentional constraint. Because when global CSS is imported in for example, a component, it will behave different when moving from one page to another.
Next.js will allow pure CSS Modules to be used anywhere in your application.
Component-level CSS must follow the convention of naming the CSS file .module.css to indicate its intention to be used with the CSS Modules specification.
This is only the currrent behavior, development is ongoing. There is an open ticket to implement global CSS per page. You can go there and upvote it.
I'm not really sure why this works but changing my paths from css/style.css to ../css/style.css for all my css and js files worked. Both my scripts and my styles now load on my top level pages and my dynamically generated post pages as well.
I have imported some css files in my component.
<template>
<link type="text/css" rel="stylesheet" media="screen" href="https://cdnglobal.immowelt.org/global-assets/4.0.0/fonts/fontello.css">
<link type="text/css" rel="stylesheet" media="screen" href="https://cdnglobal.immowelt.org/global-assets/4.0.0/legacy/0/base.css">
...
<template>
The thing is I want this styles to apply on this component.
They affects on other parent and sibling templates.
Is it possible to enable this to be applied on one template's elements?
If you are writing .vue single file components you can use this:
<style scoped src="./something.css">
</style>
you can try to import your CSS in component with
<style scoped>
#import url("https://cdnglobal.immowelt.org/global-assets/4.0.0/legacy/0/base.css")
#import url("https://cdnglobal.immowelt.org/global-assets/4.0.0/fonts/fontello.css")
...your CSS...
</style>
I use Fontello too with Vuejs, are you trying to use your own icons?
I am using turbo table for displaying data. But I am not getting borders for table. I installed PrimeNG from CLI and imported themes in styles section in angular-cli.json.
You will need to make sure the following is present :
In your index.html file the following link references:
<link rel="stylesheet" type="text/html" href="/node_modules/primeicons/primeicons.css" />
<link rel="stylesheet" type="text/html" href="/node_modules/primeng/resources/themes/redmond/theme.css" />
<link rel="stylesheet" type="text/html" href="/node_modules/primeng/resources/primeng.min.css" />
Then make sure the styles.css has the right theme import e.g:
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
Also make sure in your package.json the dependencies is there:
"primeicons": "^1.0.0-beta.6",
"primeng": "^6.0.0-beta.1"
To avoid path-relative style sheet import vulnerabilities should I attach css file on my page using full path e.g.
<link href="http://mywebsite/style.css" type="text/css" rel="stylesheet" />
instead of
<link href="style.css" type="text/css" rel="stylesheet" />
What do you think?
Just add a leading slash and make the path root-relative, rather than relative which this vulnerability relies on.
No need for the domain / scheme.
<link rel="stylesheet" href="/style.css">
what can I do that "bootstrap/less/bootstrap.less" is not overwriting all my css -styles (I could only use the .less files I only needed(e.g.: bootstrap/less/buttons.less ), but I need all classes).
When I import "bootstrap/less/bootstrap.less" it's going to overwrite my bootstrap menu and all standard selectors like input, textarea ..., but I want only to overwrite the css classes i want, but not everything ...
thanks :)
[UPDATED: 09-04-2014]
Background information for my project:
Important NuGet Pakages:
Bootstrap (v 3.0.0 ) -> imported in the master page
Bootstrap.Less (v 2.3.2 ) ->these files I use for impor in
"Site.less")
dotless (v 1.4.0.0)
html5shiv (v 0.1.0.8)
Modernizr (v 2.6.2) -> imported in the master page
Respond JS (v 1.2.0)
Visual Studio 2013
MVC5
my "Site.less" looks like
/*#import "bootstrap/less/buttons.less";*/
#import "bootstrap/less/bootstrap.less";
.BWButton {
.btn;
}
Its a little bit strange when I only import "bootstrap/less/bootstrap.less" everthing is going to be overwritten, it doesn't matter which order of the css/less import I have made in the master page and when I use only "#import "bootstrap/less/buttons.less"" no effect is on the page not even if I remove all css/less imports in the master page...But intelli sense works on both imports("bootstrap/less/buttons.less" and "bootstrap/less/bootstrap.less") (when imported inside the site.less), but on the client site Site.less(when i import "bootstrap/less/buttons.less" before in site.less ) is empty(when I select "Site.less" in fire bug)..
my master.page(Shared/_Layout.cshtml) looks in the header like this:
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/dataTable.css")
#Styles.Render("~/Content/popup.css")
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
#Styles.Render("~/Content/Site.less")
#Styles.Render("~/Content/bootstrap.css")
#Styles.Render("~/Content/site.css")
the output on the client side:
<script src="/speScripts/modernizr-2.6.2.js">
<link rel="stylesheet" href="/Content/dataTable.css">
<link rel="stylesheet" href="/Content/popup.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="/Content/Site.less">
<link rel="stylesheet" href="/Content/bootstrap.css">
<link rel="stylesheet" href="/Content/site.css">
May be this helps you a little bit more :)
In your html , make sure you include your own stylesheet at last !
<head>
<link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/css/style.css" rel="stylesheet">
</head>
In my example above, my custom stylesheet will overrule the bootstrap.min.css sheet.