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

Question

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 . 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?

Answer 1

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>

Answer 2

//In Next.js, the recommended approach for importing global CSS is to move the imports to the _app.js file. However, if you want to keep importing CSS files in their respective components as global styles, you can configure Next.js to allow this behavior. Here's how you can do it:

 //- Install the next-transpile-modules package as a development dependency:

    npm install --save-dev next-transpile-modules

 //- Create a next.config.js file in the root of your project (if it doesn't already exist).

 //- Inside next.config.js, add the following configuration:

    const withTM = require('next-transpile-modules')(['your-css-module']); // 

   // Replace 'your-css-module' with the path to your CSS module
    
    module.exports = withTM({
      webpack(config) {
        config.module.rules.push({
          test: /\.scss$/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader',
          ],
        });
        return config;
      },
    });

// - Replace 'your-CSS-module' in the configuration above with the path to your CSS module(s). For example, if your CSS files are located in the styles folder at the root of your project, you can replace 'your-CSS-module' with './styles'.

 //- Restart your Next.js development server for the changes to take effect

//By transpiling the CSS module(s) using next-transpile-modules, you can import global CSS files in your components as you did in your React app.

//Keep in mind that using global CSS can make it harder to maintain styles and can cause conflicts, especially when working on larger projects. It's generally recommended to follow Next.js conventions and use component-level CSS (CSS modules) whenever possible.

Answer 3

To import .scss files anywhere in a Next.js app, you can follow these steps:

Install the necessary dependencies:

sass or node-sass: This is required to compile SCSS files into CSS. @zeit/next-sass or next-sass: This is a Next.js plugin that allows importing SCSS files.

You can install these dependencies using npm or yarn. Here's an example using npm:

npm install sass @zeit/next-sass

Configure the Next.js app to use the SCSS plugin:

1- Create a next.config.js file in the root directory of your project if it doesn't exist already.

2- Open the next.config.js file and add the following code: javascript

const withSass = require('@zeit/next-sass');

module.exports = withSass({
  /* additional configuration options here */
});

Create a SCSS file:

Create a .scss file in your project. For example, you can create a file named styles.scss in the styles directory. Import the SCSS file in your components:

In your React components, you can import the SCSS file using a relative path. For example:

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

Note: The styles object will contain the class names defined in the SCSS file, which you can use to apply the styles to your components.

Use the imported styles in your components:

You can use the imported styles as regular CSS classes in your JSX code. For

<div className={styles.container}>
  <h1 className={styles.title}>Hello, Next.js!</h1>
</div>

In the above example, the container and title classes are defined in the styles.scss file.

Hope it helps you :D

Answer 4

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>
  );
}