Create React App 添加一个样式表-JavaScript中文网-JavaScript教程资源分享门户

Create React App 添加一个样式表

此项目设置使用 Webpack 处理所有资源。 Webpack 提供了一种自定义方式，可以将导入概念 “扩展” 到 JavaScript 之外。要表明 JavaScript 文件依赖于某个 CSS 文件，你需要 在 JavaScript 文件中导入 CSS：

`Button.css`

.Button {
  padding: 20px;
}

`Button.js`

import React, { Component } from 'react';
import './Button.css'; // 告诉 Webpack Button.js 使用这些样式

class Button extends Component {
  render() {
    // 你可以将它们用作常规 CSS 样式
    return <div className="Button"/>;
  }
}

对于 React 来说，这不是所必需的，但很多人发现这个功能很方便。你可以在这里了解这种方法的好处。但是你应该意识到，这使得你的代码很难以移植到除 Webpack 之外的其他构建工具和环境中。

在开发过程中，通过这种方式表达依赖关系，可以在编辑样式时会动态重新加载样式。在生产中，所有 CSS 文件将连接到构建输出中的单独压缩的 .css 文件中。

如果你担心使用特定于 Webpack 的语义，可以将所有 CSS 放入 src/index.css 中。他仍然会从 src/index.js 导入，但是如果稍后迁移到其他构建工具，则可以随时删除该导入。