In order to style a next js app, do I really have to import styles from "./stylesheet.css" and add class with className={styles.aClassName}?
if so, what if I want to style an element by Id or TagName?
Is there a way to style like a normal react app? ie. import "./stylesheet.css" & className="aClassName".
You can add global stylesheet.
You can also place your stylesheet.css in the public folder and refer to it from any component.
<Head>
<link href="/stylesheet.css" rel="stylesheet" type="text/css" />
</Head>
Then you can use the className="stylename" format anywhere in your component.
Related
For CSS in my nextjs project I am using styled-jsx (https://github.com/vercel/styled-jsx).
All styled JSX tags (<style jsx>) will be appended at the end of the HTML <head> element.
However I have another native (non styled-jsx) HTML <style> tag that contains several CSS overrides. If I place my <style> tag in the nextjs <Head> component it will be placed in the HTML <head> element but above the other styled-jsx style tags. This will cause that the other styled-jsx <style jsx> tags will override my styles defined in my normal <style> tag. I want to achieve the other way around.
import Head from 'next/head';
<Head>
<style dangerouslySetInnerHTML={{ __html: props.css }} />
</Head>
I already tried to put my style tag outside of the <head> element but this is no option for me right now.
How can I put my native HTML <style> tag at the end of the HTML <head> element so other styles will be overridden?
If you are still looking for an answer:
My styles were overriden by styles like Bootstrap so I was also facing your problem.
In the end I decided to override the order in next/head by overriding next.js-Sourcecode.
This is the file you might need to override:
https://github.com/vercel/next.js/blob/canary/packages/next/pages/_document.tsx
You have to move {head} down.
After some research I decided to use a npm-module named patch-package. https://www.npmjs.com/package/patch-package
It's straight forward and allows you to create a patch for the nextjs-Sourcecode.
The issue is CSS Does not effect on website after bundle although all of bundle process is fine
From the view source code page i can see the css file but it does not take any effect on website. The code bellow is what i used to call css and saw from view source code page and from my layout file.
<link rel="stylesheet" type="text/css" src="/Content/css?v2">
Does anyone have any idea for this?
Thank you.
You used
External Style Sheet
With an external style sheet, you can change the look of an entire website by changing just one file!
Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:
your code
<link rel="stylesheet" type="text/css" src="/Content/css?v2">
try like ths
src should change to href
<head>
<link rel="stylesheet" type="text/css" href="/path/yourcssfilename.css">
</head>
I have a Vue app with many components. Currently I have Font-Awesome included in the head of the index.html file however only ONE page, or component, actually needs it. Is it possible to move it to the component itself so that it only loads when it's needed?
MOVE THIS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
TO THIS
<template></template>
<link rel="stylesheet" href="../../static/css/font-awesome-4.7.0/css/font-awesome-min.css"></link>
<script>
export default {
name: 'SingleComponent',
data: function() {
return{}
}
}
</script>
<style scoped>
</style>
I've tried downloading Font-Awesome and adding a link tag in the component like above ^^^^ I don't get any errors but the icons still don't work.
Import css file in style tag of App.js
<style>
#import './static/css/style.css';
</style>
If you have just one page or component, isn't it easier to create what you need in a <template /> and <html /> tag?
Instead of trying to include Font-Awesome directly in the component, I discovered there is already a Vue wrapper for it called vue-awesome so I used that.
How do you override a BootStrap CSS file? I have created another file called site.css and linked it to the index.html file; however, this still does not allow me to override. Is this not a correct action?
If you want to override the bootstrap CSS so you can try this trick.
put your bootstrap css and site.css in head section like below example
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="site.css">
now site.css will be override to bootstrap.css :)
Proper way to override bootstrap is to create your own style class.
<div class="bootstrapclass yourownoverrideclass"></div>
in your css
.bootstrapclass.yourownoverrideclass {
margin: 5px; //override content
}
I have an ASP.NET MVC 3 project with a _Layout.cshtml and the css style sheet being accessed like this:
link href="../../Content/themes/base/jquery.ui.all.css" rel="Stylesheet" type="text/css"
This is fine for most of the views in my project but there is just one view that I would like to define the style sheet independently and in the view itself. Specifically in the head of the view. This means that the view would have to have it's own head and body tags independently of the _Layout.cshtml file.
Is this possible? If so can someone help me get started with it?
EDIT:
What I'm trying to do is put a style sheet in the head of this one view that would override the CSS from the _Layout.cshtml.
You could define an optional Razor Section in the head tag of your layout. Place it after your main stylesheet, and then it can be used in any views using the layout to bring in additional stylesheets that contain override rules.
_Layout.cshtml
<head>
<link href="../../Content/themes/base/jquery.ui.all.css" rel="Stylesheet" type="text/css">
#RenderSection("CssOverrides", false)
</head>
View.cshtml
#section CssOverrides {
<link href="../../Content/themes/base/jquery.ui.override.css" rel="Stylesheet" type="text/css">
<!-- additional stylesheets -->
}