Strategies for handling `module.scss` in React and Next.js development

Question

Strategies for handling `module.scss` in React and Next.js development

I feel completely lost.

Just to provide some background, I am working with Next and React.

// package.json
  "dependencies": {
    "@netlify/plugin-nextjs": "^3.4.2",
    "next": "^10.0.0",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^6.7.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-onclickoutside": "^6.11.2",
    "react-svg": "14.0.0"
  },
  "devDependencies": {
    "classnames": "^2.2.6",
    "sass": "^1.34.0"
  }

To test production locally, I use

npx next build && npx next start -p 4000

. Everything works smoothly in development using netlify dev -e.

However, strange effects occur when I have two imports of .module.scss, causing the client-side javascript to cease functioning.

For example, I have a page:

// /pages/test.js
import CompA from 'components/comp-a'
import CompB from 'components/comp-b'

And:

// /components/comp-a.js
import styles from 'components/comp-a.module.scss`

As well as:

// /components/comp-b.js
import styles from 'components/comp-b.module.scss`

This scenario displays correctly visually, but no client-side javascript functions are working without any visible errors. I spent the entire day troubleshooting by commenting out various components and lines of code to pinpoint this issue.

By commenting out one component import in the page, the client-side js works fine, but not with two.

Similarly, when I comment out the styles import in one of the components, the client-side js starts functioning properly as well.

In another situation where it doesn't work:

// components/comp-a.js
import styles from 'components/comp-a.module.js'
import CompB from 'components/comp-b.module.js'

It works if I comment out either the style or the sub-component.

None of these solutions make sense because in the page, I also have the Layout being imported, which contains its own styles and that works perfectly fine.

What could possibly be the cause of all this confusion?

Edit: Upon further investigation, I discovered that I was using @extend .class-abc along with @import 'style/foo.module';, and the .class-abc contained another class:

// /style/foo.module.scss
.class-abc {
  ...
  .bar { 
    ...
  }
}

Strangely, commenting out .bar resolved the issue. I'm utterly puzzled by what is happening.

javascript css reactjs sass next.js

Answer 1

Answer №1

Utilizing css/scss modules offers a key advantage by keeping styles closely tied to the component and automatically namespacing everything. Therefore, importing component styles into your page is not common practice. To enhance organization, consider restructuring as follows:

- components/
  - comp-a/
    - index.js
    - index.module.scss
  - comp-b/
    - index.js
    - index.module.scss
- pages
  // If test.js does not have its own styles
  - test.js
  // Or if test.js utilizes its own css/scss modules
  - test
    - index.js
    - index.module.scss

Your components and pages structure would then appear as:

// comp-a
import styles from "./index.module.css"

export default function MyCompA() {
  return (<div className={styles.someClass}>I have local comp-a styles</div>)
}

// comp-b
import styles from "./index.module.css"

export default function MyCompB() {
  return (<div className={styles.someClass}>I have local comp-b styles</div>)
}

// test
import MyCompA from "../components/comp-a"
import MyCompB from "../components/comp-b"

// If this also has its own styles
import styles from "./index.module.scss"

export default function MyCompTestPage() {
  return (
    <>
      <p className={styles.someClass}>I have local test page styles</p>
      <MyCompA />
      <MyCompB />
    </>
  )
}

Sharing Styles Between Components

For multiple components requiring the same styles, you can opt to (a) extract those styles to a global stylesheet or (b) consolidate that common code into its own component or (c) share the stylesheet between components. Consider this example for option c:

- components/
  - comps-ab/
    - comp-a.js
    - comp-b.js
    - index.module.scss
- pages
  - test.js

// comps-ab/comp-a
import styles from "./index.module.css"

export default function MyCompA() {
  return (<div className={styles.someClass}>I have shared comps-ab styles but still local to these components</div>)
}

// comps-ab/comp-b
import styles from "./index.module.css"

export default function MyCompB() {
  return (<div className={styles.someClass}>I have shared comps-ab styles but still local to these components</div>)
}

// test
import MyCompA from "../components/comps-ab/comp-a"
import MyCompB from "../components/comps-ab/comp-b"

export default function MyCompTestPage() {
  return (
    <>
      <MyCompA />
      <MyCompB />
    </>
  )
}

In this scenario, both components draw from the same stylesheet, yet it remains localized to these two components without manual inclusion in the test.js page.

Answer 2

Utilizing css/scss modules offers a key advantage by keeping styles closely tied to the component and automatically namespacing everything. Therefore, importing component styles into your page is not common practice. To enhance organization, consider restructuring as follows:

- components/
  - comp-a/
    - index.js
    - index.module.scss
  - comp-b/
    - index.js
    - index.module.scss
- pages
  // If test.js does not have its own styles
  - test.js
  // Or if test.js utilizes its own css/scss modules
  - test
    - index.js
    - index.module.scss

Your components and pages structure would then appear as:

// comp-a
import styles from "./index.module.css"

export default function MyCompA() {
  return (<div className={styles.someClass}>I have local comp-a styles</div>)
}

// comp-b
import styles from "./index.module.css"

export default function MyCompB() {
  return (<div className={styles.someClass}>I have local comp-b styles</div>)
}

// test
import MyCompA from "../components/comp-a"
import MyCompB from "../components/comp-b"

// If this also has its own styles
import styles from "./index.module.scss"

export default function MyCompTestPage() {
  return (
    <>
      <p className={styles.someClass}>I have local test page styles</p>
      <MyCompA />
      <MyCompB />
    </>
  )
}

Sharing Styles Between Components

For multiple components requiring the same styles, you can opt to (a) extract those styles to a global stylesheet or (b) consolidate that common code into its own component or (c) share the stylesheet between components. Consider this example for option c:

- components/
  - comps-ab/
    - comp-a.js
    - comp-b.js
    - index.module.scss
- pages
  - test.js

// comps-ab/comp-a
import styles from "./index.module.css"

export default function MyCompA() {
  return (<div className={styles.someClass}>I have shared comps-ab styles but still local to these components</div>)
}

// comps-ab/comp-b
import styles from "./index.module.css"

export default function MyCompB() {
  return (<div className={styles.someClass}>I have shared comps-ab styles but still local to these components</div>)
}

// test
import MyCompA from "../components/comps-ab/comp-a"
import MyCompB from "../components/comps-ab/comp-b"

export default function MyCompTestPage() {
  return (
    <>
      <MyCompA />
      <MyCompB />
    </>
  )
}

In this scenario, both components draw from the same stylesheet, yet it remains localized to these two components without manual inclusion in the test.js page.

Strategies for handling `module.scss` in React and Next.js development

Answer №1

Sharing Styles Between Components

Similar questions

What is the best way to include an icon with dropdown menu options?

Error encountered with React Hooks - TypeError

Patience is key when programming automated scrolling with Selenium or Protractor

Is it feasible in ES6 Javascript to access properties or methods of the superclass in a child class without the necessity of utilizing the "this" keyword?

The jQuery .accordion() feature is not functioning properly due to the failure to load jQuery into the HTML document

When the enter key is pressed, the form will be submitted and the results will be displayed in a modal window without

What are the potential disadvantages of relocating the login logic from the 'signIn()' function in NextAuth.js?

It appears that the width of RaFormInput is consistently set at 256 pixels

Tips for capturing text input from a Quill rich text editor div

Struggling to make input:checked feature function properly

The functionality of JQuery stops functioning once ajax (Node.js, PUG) is integrated

CSS: Dynamically adjusting height based on parent element's current height

Exploring the functionality of dynamic component imports in jest testing

The element is not occupying the full width within the div container

PHP code cannot be executed due to a problem with Angular routing

What is the best way to combine two JavaScript objects?

Adjust the margin of a child div based on the parent's width, with the use of JavaScript

React Native and Gradle encounter issues with reading data from the Binary store, resulting in an error message that states (.gradle/.tmp/gradle7278112572988587194.bin offset 230266 exists? true

What is the best way to utilize CSS to center an element in relation to the scroll bar?