ES6 捆绑 CSS 的方式？答案

【问题标题】：ES6 way to bundle CSS?ES6 捆绑 CSS 的方式？
【发布时间】：2018-04-14 04:20:50
【问题描述】：

我正在学习使用老式 require 语法的 React 教程，并尝试将其更新为 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 中的原因是它会被缩小和捆绑？还有其他原因吗？）

【问题讨论】：

你是在使用 create-react-app 命令创建 react 应用吗？
@Ikram-Ud-Daula 不——它抽象出了我想了解的 webpack、npm 等的所有细节，所以我选择了一个手动完成并解释所有内容的教程。这是一个很棒的教程，但它是在 ES5 中的，所以我正在尝试跟随并随着我去 ES6-ify。

标签： javascript css import ecmascript-6

【解决方案1】：

你可以像其他任何东西一样importcss！

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>
    )
  }
}

【讨论】：

这是css模块版本，你只需要import "/index.css";来匹配他们的初始代码。
知道了。没有意识到 CSS 可以被视为 JS 模块。谢谢！

【解决方案2】：

只需使用 import "FilePath/FileName" 在文件中导入 css；

【讨论】：