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

我设法解决了这个问题

ts-node --compiler-options={\"module\":\"commonJS\"} xxx.ts

Answer 2

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

中

var field = new ExpressionFieldDefinition<MyDocModel, string>(x => x.Id);
await collection.DistinctAsync(myCollectionName, field, filter, options, timeout);

然后使用

引用app.css

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

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

Answer 3

我会选择第一个命题。（结果安静一样）

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

Answer 4

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

Answer 5

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

你写了scoped（到你想要的组件）css然后将你所有的部分导入你的main.css。

其他一些优点：

你可以通过让一个部分通过变量来定义它们来进行主题化，然后首先导入变量，然后你所有的部分变量都可以使用这些变量。
将css放在一个范围内（至少对我来说）感觉更多＆＃34;反应＆＃34;组件应该是独立的，但它也不是内联样式，我发现它很丑陋（我不喜欢用样式混淆我的.js文件）

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

Answer 6

你应该通过vue.js组件查看选项（作用域/整体）
您可以选择像SASS这样的预编译css语言，它可以使用@extend ..etc重用公共属性，如下所示：
```
%common {
  width: 100%;
  height: inherit;
}

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

Answer 7

我发现这一行非常有助于导入：

@import 'file.css';

Answer 8

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

如果您将其声明为

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

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

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

8 个答案: