I'm new to Next.js.
Although I declared css files in _app.tsx, some of styles defined in the css files are not working.
Some of styles use images imported from 'public/images' and this are not imported neither.
Please help me find out what is wrong with this. Do I have to change the folder structure?
The version of Next.js is "13.1.1".
Thanks in advance!!
I'm working on a project with below folder structures.
public
fonts
images
src
pages
styles
global.css
layout.css
My _app.tsx file looks like
import '#/styles/layout.css';
import '#/styles/common.css';
export default function App({ Component, pageProps }: AppProps) {
...
}
Rename your CSS file as layout.module.css. Use .module.css extension in your CSS files. Refer nextjs documentation for further references.
am also new to Nextjs , turned out you can't use regular CSS files, you should use CSS modules.
you need to rename each CSS file 'except global' to end with .module.css instead of .css
then you need to import the file in the component you want to style : import styles from 'style/file.module.css'
to style an element create a class in the CSS file:
.paragraph{ color:green }
and then use it in the component:
<p className={styles.paragraph}>I am styled with CSS modules</p>
Ref!
there is a standard CSS framework called Tailwindcss you should try it
Related
I have a simple Angular (13) application with Material.
I've created a CSS file that is meant for overriding some of the Material styles, and imported it into styles.scss. This import is the last line of this file.
Yet, none of the CSS definitions in the external file seem to actually override the existing styles from Material.
When I place these definitions directly in styles.scss, they work.
What is the difference between importing CSS definitions from a file and placing them directly, in this case? Am I missing something here?
To import css to an scss file, you should import it without the extension like this.
#import "path/to/file/file_name_without_extension"
If you import that with extension
#import "path/to/file/file_name.css"
it won't work as it gets translated to
#import url(path/to/file/file_name.css);
Merged PR from SASS repo: Implement raw css imports
I am facing problem with external css files on my react project. I am using material UI components. In the react components folder I created css file for each components but they are not loading when i hard reload the site.
I wanted to use external css rather than styled components or material ui style syntax.
Just import the css / scss file in your component and make sure you've added the classes for the elements.
If you are looking a more generic option you can import your style.css file in your main App.jsx (if you call it "App.jsx") file. Then you just use the className and will have access to your css.
App.jsx file
import './style.css'; // Your path to your style.css
function App() {
return (
<div>React app</div>
);
}
export default App;
I'm building a website with gatsby and I have set up the gatsby scss plugin. Everything seemed to be working fine until I realized my styles from home.module.scss were also being applied to my navigation component that only imports navbar.module.scss.
I have a style for my buttons in each of these modules that looks like this...
button {
// different styles in the different modules
}
Both of these modules import a global scss file at the top like this...
#import '../styles/global.scss';
The react components only import their respective modules. In my main index component I import global styles like this import './global.scss'
Am I misunderstanding how scss modules work in React or is this is a bug?
from my understanding
In react importing SCSS or CSS in any component will be global.
So it will affect all other components as similar to the component where you imported the SCSS file.
use different class names
When I add new HTML code to my React app , the CSS styles from the App.css file aren't applying anymore , until I retype Import './App.css'" in the head.
Any solution please.
All our components in React act like modules and have their data (variables, functions) private to them. To access code or styles from other files we need import from other modules.
Our App.js is also one such component. Until you do import './App.css', the CSS will not be applied to App.js.
Problem solved , it was about bootstrap .
Import bootstrap/dist/css/bootstrap.min.css before App.css .
I was doing the opposite .
Am trying upgrade my project from angular JS to angular 4. I have style sheets which i have used in angular JS project.
This is my folder structure
I created components using angular CLI.
Everything works perfect but i don't know how to use my styles in angular 4 project.
Can some one explain how i can use my styles globally? and also only in certain components?
You can add your styles within the angular-cli.json:
"styles": [
// Your styles go here
]
This is for global styles. Local styles (for a certain component) are within the accordant CSS-file, which belongs to your component, e.g. foo.component.css. By default each component has the following annotation:
#Component({
selector: 'app-foo',
templateUrl: './foo.component.html',
styleUrls: ['./foo.component.css'],
})
So, foo.component.css contains the CSS for the component FooComponent.
Take a look here:
Component Styles
Global styles
Apart from adding the css file to angular-cli.json as shown by #pzaenger you can also add it to index.html page of your app as shown below :-
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
OR
you can even import it into an existing CSS file in your app by adding the #import statement at the top of that file as shown below :-
#import "~bootstrap/dist/css/bootstrap.min.css";
This way you can also add CDN links of the CSS file which cannot be done in angular-cli.json file. You can find a more elaborated explanation at this link.