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.
Related
I have a project going on, in several components, I need to put styles.
Bootstrap is working fine. But when I added style.css it does not seems to catch up.
I have checked the page source and the style.css file is linked properly to my index.html file.
my file structure:
This is the head tag of my index.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="%PUBLIC_URL%/style.css">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>News Scroller</title>
</head>
It depends, what does your Webpack create when it compiles? How are you even putting your react component into your index.html now?
It seems like those are not there yet. These few things needs to be done:
There should be a div where your react application is mounted
Your index.html shouldn't reference styles.css directly. It's usually imported in your App.js or `Index.js, depending on your naming
In the style.css file, I was writing the CSS selector incorrectly.
I wrote this before : .input-group .input-group-sm .col-md-3
which is not able to select the className.
Instead of this I replaced the "" between the classNames and the CSS rules worked.
this is how I load some libs to my angular project:
<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<script src="lib/angular.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/effects.css">
</head>
<body>
</body>
</html>
now, suppose I wanted to load another css file that is also stored in the "css" folder. Could I declare just the folder and have all ".css" files inside properly loaded to the project? For example:
<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<script src="lib/angular.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/*.css"> <--- here!
</head>
<body>
</body>
</html>
Thanks.
Unfortunately, no. Angular is a front-end framework, and you cannot load all the CSS files in a folder with only front-end languages without specifying them individually.
If you have access to a back-end language, you can scan the directory and work out what files are contained within. Then you can use a loop to individually write each link to your HTML.
Without a back-end language, the best thing you can do is package up all of the CSS or JS files used in a project into a single file. This improves performance, and also allows you to easily compress the code.
I have project built using RUBY with grunt as its asset pipeline. At build time I need to take all the styles from the /dist/all.min.css file and place them into a custom style tag in the head <style amp-custom>...</style.
When developing I include the css as a linked stylesheet in the head. Which is fine. But when this is live the styles must be inlined.
I have tried a few grunt emailer tasks which are designed to take any linked asset and inline it, however this either didn't work or would take all linked assets and try and inline them and there are a few JS links that i do not what inlined, only the stylesheet.
head during development
<head>
<title>Title</title>
<link rel="canonical" href="/index.html" data-embed-ignore>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<!-- Linked stylesheet for developing -->
<link rel="stylesheet" type="text/css" href="{{{asset_base}}}/css/all.css" data-embed>
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
<script src="https://cdn.ampproject.org/v0.js" async data-embed-ignore></script>
</head>
desired head for production
<head>
<title>Title</title>
<link rel="canonical" href="/index.html" data-embed-ignore>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<!-- Inlined styles -->
<style amp-custom>
/* Custom styles here */
</style>
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
<script src="https://cdn.ampproject.org/v0.js" async data-embed-ignore></script>
</head>
I am using mustache for the templating engine and was think i could somehow include the css file if its available. This way when i do the production grunt task it could remove the linked style tag and generate the file thats included via mustache. But i am not entirely sure how to do that or even if it will work.
Here is my root HTML file. As you can see, it has no problem getting styles from Bootstrap (this functionality is working just fine). When I open up index.html in the browser at localhost:8080 (running a server through a webpack command), It cannot find the stylesheet! This is something I don't understand. Please help. Thank you.
BTW.. stylesheet.css is at the same directory level as index.html AND index.js. How come the bootstrap stylesheet is getting picked up but not my stylesheet?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="root">
</div>
</body>
</html>
Meteor automatically loads all style sheets. I've seen it recommended to put them in the /client/stylesheets, or /imports/ui/css folder.
You don't have need to put <link rel="stylesheet" href="stylesheet.css" /> . Try removing that line and see if you can see your styles applied to your page.
The reason <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> is working for you is because it is loading from an external address. It is hard-coded on your html and not being managed by meteor. I don't recommend it, but if you wanted to do the same thing with your style sheet, you would put it in the /public folder, and use <link rel="stylesheet" href="/stylesheet.css" />. But Meteor is designed to manage all the style sheets for you, so best not to do this.
Lastly, if you want to control the order style sheets are imported, you can specify import '/client/stylesheet.css'; // import CSS from absolute path - see here for clarity: https://guide.meteor.com/structure.html#intro-to-import-export
First Grails (2.3.6) app here. Trying to add a custom CSS file to my views/index.gsp:
<html>
<head>
<link rel="stylesheet" type="text/css" href="path/to/main.css" />
</head>
<body>
...
</body>
</html>
Inside my grails-app directory, where the views subdir lives, I would have expected to see a resources or css directory, but don't see anything. So I ask: where do I place main.css so that it's available to index.gsp at runtime?
Your css should not go under grails-app/views. It should be under web-app/css/. Then you can do something like this in your GSP...
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">