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

The Problem:

How to import .scss files as Global CSS from different components in a Next.js application, avoiding the error ‘Global CSS cannot be imported from files other than your Custom ‘

The Solutions:

Solution 1: Importing SCSS Files in Next.js

To import SCSS files anywhere in your Next.js application, follow these steps:

1. Install Dependencies:

Install the necessary dependencies for SCSS compilation and Next.js plugin support:

npm install sass @zeit/next-sass

2. Configure Next.js App:

Create a next.config.js file in your project root and configure Next.js to use the SCSS plugin:

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

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

3. Create SCSS File:

Create a SCSS file in your project (e.g., styles.scss), where you can define your styles.

4. Import SCSS File in Components:

In your React components, import the SCSS file using a relative path:

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

5. Use Styles in Components:

Access the imported styles as regular CSS classes in your JSX code:

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

Solution 2: Using next-transpile-modules

This solution involves using the next-transpile-modules package to transpile CSS modules, allowing you to import global CSS files anywhere in your Next.js app.

Steps:

• Install next-transpile-modules as a development dependency:

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

• Create a next.config.js file in the root of your project:

  // next.config.js
  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 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, replace 'your-CSS-module' with './styles'.

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

By using next-transpile-modules to transpile your CSS modules, you can import global CSS files in your components as you did in your React app. However, it’s important to note that using global CSS can make it harder to maintain styles and can cause conflicts, especially in larger projects. It’s generally recommended to follow Next.js conventions and use component-level CSS (CSS modules) whenever possible.

Solution 3: Use Custom CSS Modules

In Next.js, to import CSS files that can be used anywhere in the app and will not cause global CSS conflicts, you can use CSS Modules. Here’s how:

1. Create a new style file inside the styles folder and name it with the .module.scss extension, e.g., test.module.scss.

2. Import the CSS module in the component file using the following syntax:

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

3. Use the imported styles in the component by specifying the class names from the SCSS file, e.g.:

<div className={styles.yourClassName}>
  ...
</div>

This will ensure that the CSS styles are scoped to the component and will not conflict with global CSS.

Video Explanation: