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?

Telecommunication

A similar question with some good answers is asked here: #60942353 – Goulder

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>

Lettered

I can't do like the above. It will be big change because there are lot of files which needs conversion and also those classes must be global. – Telecommunication

Do you want .scss to be global or you want to include individually in files? – Clarion

@Clarion why do the those things need to be mutually exclusive? In my plain React app I have CSS for components together with components. And I import them inside those components. And if I ever use styles from that same CSS file in another component - I also import it in that component. I know the imports in React are also global - but this serves as hints for developers - to understand where the CSS classes are located. And that's exactly what I want in Next - to not have it tell me where exactly should I import my global CSS files from. – Goulder

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.

Biodynamics

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Pram

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

Customhouse

I want to import "../styles/styles.scss" as golbal css means import '../styles/styles.scss'; I can't write {styles.container} something like this – Telecommunication

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

Sp