19

我正在为我的项目使用 css 模块，并且我有一个文件定位.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);
4

8 回答 8

5

我设法让这个工作：

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

.someclass {
  composes: class-to-compose;
  // other styles
}
于 2020-01-09T03:00:03.670 回答
2

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

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

然后引用 app.css 使用

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

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

于 2017-11-01T21:35:06.797 回答
0

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

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

     %common {
   width: 100%;
   height: inherit;
 }

 .my-class {
   @extend %common;
 }
于 2017-05-29T04:50:26.137 回答
0

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

  • 两个命题都有相同的结果
  • 如果有一天你必须编辑你的菜单 css，你只需要编辑你的菜单 css 而不是你的组件。
  • 您让 CSSModules 做出决定。（更多的未来证明？）
于 2015-12-23T15:33:55.310 回答
0

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

于 2016-04-21T19:49:46.730 回答
0

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

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

其他几个优点：

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

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

于 2017-05-14T14:35:35.307 回答
0

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

如果您将它们声明为

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

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

于 2017-09-27T14:03:03.247 回答
0

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

@import 'file.css';
于 2017-07-05T10:45:51.183 回答