使用css模块，如何从文件中导入类？

Question

我在我的项目中使用css模块，我有一个文件positioning.css，它有一些我想要导入的有用的类。例如.right, .left

使用CSS模块的最佳方法是什么？

目前我可以看到两种选择，但它们并不是很好：

组件样式的组合()

.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);

Answer 1

我必须设法做到这一点：

// css file
@value class-to-compose from "file-where-class-is-defined.css";

.someclass {
  composes: class-to-compose;
  // other styles
}

Answer 2

一种方法是将顶级的所有应用程序级css变量和计算收集到app.css中。

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

然后使用

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

通过这种方式，您可以在根级别管理一个文件中的@import作用域。

Answer 3

我同意第一个提议。(结果是一样安静)

• 两个命题都有相同的结果。
• 如果有一天你必须编辑你的菜单css，你只需要编辑你的菜单css，而不是你的组件。
• 你让CSSModules做决定。(更多的未来证明？)