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

Question

我正在为我的项目使用 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);

Answer 1

我会选择第一个提议。 （结果还是一样）

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

Answer 2

您可以将您经常使用的 css 文件导入到您在特定页面上导入的更广泛的 CSS 文件中，这是采用第二种方法但使其更简洁，特别是如果您有很多要导入的通用核心 css 文件在几乎所有页面上。

Answer 3

我建议你使用 [Sass] [1]。 Sass 允许使用部分（即分布式/作用域 css 表）。

然后您编写作用域（到您想要的组件）css 并将所有部分导入到您的 main.css 中。

其他几个优点：

1. 您可以使用一个通过变量定义它们的局部变量来进行主题化，您首先导入变量，然后您的所有局部变量都可以使用这些变量。
2. 在一个作用域级别（至少对我而言）让 css 感觉更“反应灵敏”，其中组件应该是独立的，但它也不是内联样式，我觉得丑陋和奇怪（我不喜欢用样式弄乱我的 .js 文件）

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

Answer 4

1. 你应该看看 vue.js 组件的选项（范围/整体）

2. 您可以选择像SASS这样的预编译css语言，可以使用@extend ...等来复用公共属性，如下所示：

    %common {
      width: 100%;
      height: inherit;
    }
   
    .my-class {
      @extend %common;
    }
   

Answer 5

我发现这一行对导入很有帮助：

@import 'file.css';

Answer 6

您可以将它们设置为全局变量并将它们的名称更新为更具语义性，例如 BootStraps pull-right。

如果您将它们声明为

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

然后，您可以在您的应用程序中使用它们，最好在入口点尽早导入全局变量。

Answer 7

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

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

然后引用 app.css 使用

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

这样您可以在根级别管理一个文件内的@import 范围。

Answer 8

我已经设法让这个工作：

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

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