what's the main diffrence style.scss vs style.module.scss?

user_8283500 0
Viewed 10577

I'm using react with sass.

It's look like both have same benefits. Locally scoped, No more conflict etc. What is the main diffrence between style.scss vs style.module.scss

Why do we need .module prefix?

sass css-selectors module css
1 Answers

Short Answer

*.scss is normal SCSS file while *.module.scss is SCSS file with CSS modules.

According to the repo, CSS modules are:

CSS files in which all class names and animation names are scoped locally by default.

Usage

Below is the usage for *.scss

.item {
  display: flex;
}

If you use SCSS in a normal way, you must declare the class name as a string

// Simply import
import './foo.scss';


const App = () => (
  <div className="item">
    {item}
  </div>
)

Below is the usage for *.module.scss

.item {
  display: flex;
}

If you use SCSS as a CSS module, you must use them as how you would use a JS module.

// import as a js module 
import styles from './foo.scss';

const App = () => (
  <div className={styles.item}>
    {item}
  </div>
)

Output

<!-- Normal SCSS -->
<div class="item">foo bar</div>

<!-- SCSS with Class Module will have 
     hash values suffixed to the class name -->
<div class="item-35ada5">foo bar</div>
user_93999780
Related