Question 229961 in CSS Question posted in
Some basic documentation can be found here.

I set CSS styles in module.css of my nextjs application, but it don't work

I created a nextjs with electron template application:

my code as here:
https://codesandbox.io/s/sx6qfm

I set CSS classes in VscodeLayout.module.css:


.container {
  width: '100%';
  height: '100%'
}

.header {
  height: '28px';
  width: '100%';
  background-color: '#00d9'
}


.leftBar {
  background-color: '#0031'
}

.navBar {
  background-color: '#00f3'
}

.content {

}

.rightBar {
  background-color: '#00f3'
}


.footer {
  height: '22px';
  background-color: '#3370b7'
}

but when I run the demo my module css do not work:

enter image description here

please help with this, why module css don’t work there?

Tags:

2

Answers


  1. 0

    All classes from your css shouldn’t have quotation marks:

    .container {
  width: 100%;
  height: 100%
}

.header {
  height: 28px;
  width: 100%;
  background-color: #00d9
}

    And so on.. It should work

    Login or Signup to reply.
  2. 0

    The issue lies with the quotation marks. Please update the CSS without using any quotation marks.

    .container {
    width: 100%;
    height: 100%
  }
  
  .header {
    height: 28px;
    width: 100%;
    background-color: #00d9
  }
  
  
  .leftBar {
    background-color: #0031
  }
  
  .navBar {
    background-color: #00f3
  }
  
  .content {
  
  }
  
  .rightBar {
    background-color: #00f3
  }
  
  
  .footer {
    height: 22px;
    background-color: #3370b7
  }

    You can utilize regex in VS Code to perform a replacement using the pattern '(.*)' to $1.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search