CODEWITHSUNDEEP
reactjsnext.jstailwind-csspostcss
PianoRockCover
PianoRockCover

Reputation: 61

Why next.js duplicates styles?

I have a next.js project. For styling I am using tailwind, scss modules and postcss. I have no overridden webpack configurations.

In development mode next.js injects styles in tags as expected, but in production it injects similar styles as *.css chunks and tag at the same time.

Next.js style duplication

Upvotes: 3

Views: 1677

Answers (2)

Bhargav Ladani
Bhargav Ladani

Reputation: 1

Fixed issues related to multiple instances, duplication css, and out-of-order occurrences on Next.js version 14.

Modified the following files:
- `pages/_app.js`
- `pages/index.js`
- `styles/pages/_home.scss`
- `style/main.scss`

**pages/_app.js**

import Header from '@/app/components/Header';
import Footer from '@/app/components/Footer';

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

**pages/index.js**

import React from 'react'
import "../styles/sass/pages/_home.scss"

function index() {
    return (
        <>`<h1>home</h1>`</>
    )
}

export default index


**style/main.scss**

// Bootstrap Default components
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/variables-dark";
@import "~bootstrap/scss/mixins";

// Project's custom variables or mixin if required
@import "sections/fonts";
@import "variables";
@import "functions";
@import "mixins";
@import "custom";

// Project core common styles
@import "layout";

Changes made:

1. `pages/_app.js`:
   - Corrected imports for `Header` and `Footer` components to use relative paths (`@/app/components/Header` and `@/app/components/Footer` respectively).

2. `pages/index.js`:
   - Imported the homepage component with the correct path (`"../styles/sass/pages/_home.scss"`) for styling.

3. `styles/pages/_home.scss`:
   - Ensured proper imports of `main.scss` and `reactSelect` in the homepage styles.
   - Updated styles for the `.banner` section to maintain consistency and compatibility with other components.

4. `style/main.scss`:
   - Checked compatibility with Next.js 14 by verifying imports and usage of Bootstrap and project-specific styles.
   - Verified that custom variables, mixins, and common styles are appropriately imported and utilized.

These changes aim to address compatibility issues with Next.js 14 and ensure consistency and correctness across the project files.

[Screen Recording 4-3-2024 at 10.36 AM.webm](https://github.com/vercel/next.js/assets/77716923/a57c1376-a5d4-4012-8f27-2206dcb4bdc0)

Upvotes: -2

Alexander Ivanov
Alexander Ivanov

Reputation: 1328

Do you use Next.js' experimental optimizeCss with Tailwind or other CSS frameworks? It might be duplicating style as it injects inline CSS.

Upvotes: 1

Related Questions