javascript - ES6 捆绑 CSS 的方式？

Question

我正在学习使用老式 require 语法的 React 教程，并尝试将其更新为 ES6 中更现代的 import 语法。

教程建议我们用以下几行开始 JS 文件

var React = require("react"); var ReactDOM = require("react-dom"); require("./index.css");

我发现前两行应该改为

从“react”导入React； 从“react-dom”导入ReactDOM；

但我被困在第三行了。需要 CSS 文件的导入版本是什么？

(通常我只会在 HTML 文件中链接 CSS - 我认为他们让我们将其包含在 JS 中的原因是这样它会被缩小并捆绑？还有其他原因吗？)

Answer 1

您可以像其他任何东西一样导入 css!

导入“/index.css”；

---

I assume the reason they're having us include it in the JS is so it will get minified and bundled?

你说得对!在模块中导入 CSS 允许 Webpack 等工具正确搜索依赖关系树并包含您的 CSS 文件。

为 CSS 导入指定模块名称还可以实现一些简洁的功能。

例如，如果您为导入分配一个模块名称，如下所示，

import stylesheet from './index.css';

您现在可以将样式表中的类选择器视为模块名称的属性，这样可以轻松地将样式分配给组件的 DOM。

例如，您现在可以执行以下操作:

import stylesheet from './index.css';

class ExampleComponent extends React.Component {
  ...
  render() {
    return (
      <div className={stylesheet.myClassSelectorName}></div>
    )
  }
}