Import CSS Files #12915
-
|
Hey ! I'm creating this issue for asking about css importation. I have just started NextJS to develop a landing page. I don't want to write my CSS in styled-jsx and I was looking to use CSS files like in React. I read that I could write my CSS with the css module (https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css) to have something like this :
However with that I cannot do a class concatenation... That's why i want to use css files like react ! So... This is what i'm trying to do or it doesn't work : And this is my css file : I've also try this but it doesn't work either : How can I get an item with two classes without using jsx-styled? Thank's a lot ! |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 6 replies
-
|
I guess you better look at SASS support if you want to use non-css-in-js solutions. (but I'm not familiar with those, I prefer using css-in-js with Emotion) |
Beta Was this translation helpful? Give feedback.
-
|
Thank's for your answer, i've just tried SASS but that removes the use of global.css for templating :( |
Beta Was this translation helpful? Give feedback.
-
|
just import css, it works fine: you can import it in the _app.js something like this: and your css should have that class .container {
padding: 20px;
}however note that this approach is error prone because of collisions and harder to maintain, And Also has a performance impact as you would be loading all the CSS which is not needed on the rendered page. But you want to have all css in one file, it should work fine. Sorry, before edit, I pasted the code solution for css module instead. I have updated the answer now. |
Beta Was this translation helpful? Give feedback.
-
|
Thank's! But it's what i've specify on my topic, i don't want this because à can't concat two classes :( |
Beta Was this translation helpful? Give feedback.
-
|
I have updated the answer, with className you can apply mutiple classes together. Glad that you got it solved though. cheers |
Beta Was this translation helpful? Give feedback.
-
You can! These values are just strings, you can concanate them: <p className={styles.error + ' ' + styles.foo}>hey</p>
// or with template strings
<p className={`${styles.error} ${styles.foo}`}>hey</p>To make things easier you can use a package like <p className={cx(styles.error, styles.foo)}>hey</p> |
Beta Was this translation helpful? Give feedback.
-
|
Hey ! I've already try and i get this : Components/Newsletter/Newsletter.js : Components/Newsletter/Newsletter.module.css : On my website i get this Did u have an idea? Thank's again!! |
Beta Was this translation helpful? Give feedback.
-
|
Notice that I added a space between the two class names, if you concat the two classes directly they will become just one: |
Beta Was this translation helpful? Give feedback.
-
|
Oh yes my bad I will use classname then! Thank's a lot! |
Beta Was this translation helpful? Give feedback.
You can! These values are just strings, you can concanate them:
To make things easier you can use a package like
classnames: