каков основной стиль различий.s css против style.module.s css? - PullRequest
Новая
       4

каков основной стиль различий.s css против style.module.s css?

0 голосов
/ 18 марта 2020

Я использую реакцию с sass.

Похоже, оба имеют одинаковые преимущества. Локальная область действия, больше нет конфликтов и т. Д. c В чем основное различие между style.scss и style.module.s css

Зачем нам нужен префикс .module?

1 Ответ

1 голос
/ 18 марта 2020

Краткий ответ

*.scss - это обычный файл S CSS, в то время как *.module.scss - это файл S CSS с CSS модулями.

В соответствии с репо Модули , CSS:

CSS, в которых все имена классов и имена анимаций по умолчанию имеют локальную область видимости.

Использование

Ниже приведено использование для *.scss

.item {
  display: flex;
}

Если вы S CSS обычным образом, вы должны объявить имя класса в виде строки 

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


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

Ниже используется для *.module.scss

.item {
  display: flex;
}

Если вы используете S CSS в качестве CSS модуля, вы должны использовать его так же, как если бы вы использовали JS модуль. 

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

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

Выход 

<!-- 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>
...