Question 45688 in CSS Question posted in
Some basic documentation can be found here.

How to import .scss files anywhere in Next.js app?

I want to convert pure React app to NextJs app. In React app I’m importing .scss CSS files in multiple places of components.
Once I move the code into Next.js environment it is showing error:

Gobal CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).

I want my CSS to be imported in their places as Global CSS.

Any configuration helps here?

Tags:

2

Answers


  1. 0

    In your Next.js project you have styles folder which includes global.css file, if you want to create specific style file and import it anywhere in your files you should name it as *.module.scss and import it to desired destination

    import Classes from 'styles/test.module.css';


//usange


<div className={Classes.yourClassName}>

</div>
    Login or Signup to reply.
  2. 0 
    npm install sass

import '../styles/global.scss';
import App from 'next/app';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

import styles from './myComponent.module.scss';

function MyComponent() {
  return (
    <div className={styles.myClass}>
      <p>Hello, world!</p>
    </div>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search