Использование sass в React как: import './App.scss'; - PullRequest
Новая
       32

Использование sass в React как: import './App.scss';

1 голос
/ 05 мая 2019

Я использую preact-cli для генерации проектов и могу изменять конфигурацию веб-пакета.

Я хочу импортировать стили в мои компоненты, используя следующий формат; 

// Component.scss
.component {
 width: 100px;
 height: 100px;
 background: red;
}


// Component.jsx
import './style.scss';

const Component = () => (
 <div className="component">
 </div>
)
export default Component

С компонентом, стилизованным с использованием стилей .scss ...

1 Ответ

0 голосов
/ 05 мая 2019

в соответствии с последней документацией preact-cli, вы должны выполнить следующую команду внутри вашей папки приложения preact: 

npm install --save-dev node-sass sass-loader

Редактировать:

Я вижу, что ты делаешь неправильно.Вы должны использовать ваши стили следующим образом:

styles.scss 

.test {
  background: red;
}

header.js 

import styles from "./style.scss";

const Header = () => (
  <header class={styles.test}>
    <h1>Preact App</h1>
    <nav />
  </header>
);

export default Header;

Почему Вы должны сделать это таким образом?

Потому что это в комплекте.Каждый стиль будет переведен на уникальное имя.Например, .test будет .test__SOmeThiNG.

Таким образом, не будет проблем с использованием имени класса .test в любом другом компоненте.

Думайте об этом как о песочнице для вашего компонента.

...