0

Is it possible to use scss and css modules together. I have a react project and my css files are following scss. I want to use css modules on this project. Is it possible to use css modules on these scss styling?

For example I have my css file like this (nested scss style)

.navbar-side {
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
  width: 28.9vmin;
  top: 10.54vmin;
  padding-bottom: 3.4vmin; }
  .navbar-side .logo {
    width: 50%;
    height: 20.4vmin;
    background: url("../images/logo.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin-left: 25%; }
  .navbar-side .navbar-item {
    padding: 1.36vmin;
    transition: all 0.2s ease;
    cursor: pointer;
    padding-left: 5.1vmin; }
    .navbar-side .navbar-item:hover {
      background: rgba(255, 255, 255, 0.15); }
    .navbar-side .navbar-item.active {
      background: rgba(255, 255, 255, 0.25); }
    .navbar-side .navbar-item .navbar-item-inside {
      display: none; }

Now How to use it with css modules? I mean can I use className = {style.navbar-side} for giving style to one of my div?

EdG
  • 2,243
  • 6
  • 48
  • 103
  • SCSS is a superset of CSS, so, yes, you can have a SCSS file that is backwards compatible with CSS (in other words, a .css file that has been renamed to .scss). – Mr Lister Jan 21 '18 at 09:08
  • Please look at my edit. – EdG Jan 21 '18 at 09:22

1 Answers1

-1

Sorry just for some clarity I feel the solution can be achieved if you are using webpack. You can have css and scss all bundled into one file.

ben_fluleck
  • 44
  • 2
  • 8