Question

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

教程建议我们用行

开始我们的JS文件

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

我已经发现前两行应该改为

import React from "react"; import ReactDOM from "react-dom";

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

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

Answer 1

你可以import css就像其他任何东西一样！

import "/index.css";

我认为他们让我们把它包含在JS中的原因是这样的会被缩小并捆绑吗？

你是对的！在模块中导入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>
    )
  }
}

Answer 2

使用import＆＃34; FilePath / FileName＆＃34;;

在文件中导入css

ES6方式捆绑CSS？

2 个答案: