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

Posted 2023-02-22

【中文标题】使用 css 模块，如何从文件中导入类

【英文标题】：using css modules, how can I import classes from a file

【发布时间】：2016-03-18 21:38:58

【问题描述】：

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

【问题讨论】：

你在使用 webpack 吗？如果是这样，有一个 css 加载器允许您像包一样直接导入 css 文件：github.com/webpack-contrib/css-loader

我通常会创建一个globals.scss 文件，其中包含非组件特定的类，并通过字符串引用它们。

【参考方案1】：

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

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

【参考方案2】：

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

【参考方案3】：

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

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

其他几个优点：

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

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

【讨论】：

您的链接已失效 :)

我会推荐 styled-components 而不是 sass

【参考方案4】：

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

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

 %common 
   width: 100%;
   height: inherit;
 

 .my-class 
   @extend %common;
 

【参考方案5】：

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

@import 'file.css';

【参考方案6】：

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

如果您将它们声明为

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

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

【参考方案7】：

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

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

然后引用 app.css 使用

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

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

【参考方案8】：

我已经设法让这个工作：

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

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