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 文件的 import 版本是什么？

(通常我会在我的 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，如下所示，

import stylesheet from './index.css';

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

例如，您现在可以:

import stylesheet from './index.css';

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