Используя модули css, как я могу импортировать классы из файла

Я использую модули css для своего проекта, и у меня есть файл positioning.css, который имеет некоторые полезные классы, которые я хочу импортировать. например .right, .left

Каков наилучший подход для этого, используя CSS-модули?

На данный момент я вижу 2 варианта, но они не так уж хороши:

композиция в стиле компонента

.right {
    composes: right from '../styles/positioning.css';
}

или

множественный импорт модулей CSS в компоненте

import positioning from '../styles/positioning.css'
import styles from './myComponent.css';
Object.assign(styles, positioning)

class Menu extends Component {

  render() {

    return (
      <div styleName='menu'>
        <div styleName='left'>this is left</div>
        <div styleName='right'>this is right</div>
      </div>
    );
  }
};

export default CSSModules(Menu, styles);

Ответы

Ответ 1

Один из подходов - собрать все переменные css на уровне приложения и вычисления на верхнем уровне в app.css

@import "./theme/layout.css";
@import "./theme/colors.css";
...

Затем ссылку app.css с помощью

@import "../../app.css";

Таким образом вы можете управлять областью @import внутри одного файла на корневом уровне.

Ответ 2

Я пойду с первым предложением. (результат тихий)

Оба предложения имеют тихий результат.
Если когда-нибудь вам нужно отредактировать свое меню css, вам просто нужно будет отредактировать ваше меню css, а не ваш компонент.
Вы разрешаете CSSModules принимать решения. (более футурное доказательство?)

Ответ 3

Вы можете импортировать файлы css, которые вы часто используете, в более широкий CSS файл, который вы импортируете на определенные страницы, это делает второй подход, но делает его более чистым, особенно если у вас есть много общих файлов css css, которые вы импортируете на почти всех страницах.

Ответ 4

Я бы посоветовал вам пойти с [Сасс] [1]. Sass позволяет использовать частичные (например, распределенные/ограниченные css-листы).

Вы записываете область (в нужные вам компоненты) css и импортируете все свои частичные файлы в ваш main.css.

Пара других преимуществ:

вы можете сделать theming, имея один частичный, который определяет ваши данные через переменные, которые вы сначала импортируете, а затем все ваши частичные файлы могут использовать эти переменные.
имеющий css на уровне области (по крайней мере для меня), чувствовал себя более "реагирующим", когда компоненты должны быть автономными, но это также не было встроенным стилем, который я считаю уродливым и странным (я не как загромождать мои .js файлы со стилями)

[1] http://sass-lang.com/

Ответ 5

Вы shuold проверяете опцию с помощью компонента vue.js(в общем/целом)
Вы можете выбрать предварительно скомпилированный css-язык, такой как SASS, который может использовать @extend..etc для повторного использования общего свойства, как показано ниже:
```
%common {
  width: 100%;
  height: inherit;
}

.my-class {
  @extend %common;
}
```

Ответ 6

Я считаю, что эта строка очень полезна при импорте:

@import 'file.css';

Ответ 7

Вы можете установить их как глобальные и обновить их имена, чтобы быть более семантическими, например BootStraps pull-right.

Если вы объявите их как

:global(.right) {
    /* ... */
}

Затем вы можете просто использовать их в своем приложении, предпочтительно импортируя глобалы на ранней стадии в точке входа.