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 来说,这不是所必需的,但很多人发现这个功能很方便。

你可以在 https://medium.com/seek-blog/block-element-modifying-your-javascript-components-d7f99fcab52b 了解这种方法的好处。

但是你应该意识到,这使得你的代码很难以移植到除 Webpack 之外的其他构建工具和环境中。

优点

动态加载

在开发过程中,通过这种方式表达依赖关系,可以在编辑样式时会动态重新加载样式。

在生产中,所有 CSS 文件将连接到构建输出中的单独压缩的 .css 文件中,这样会达到动态载入的效果。

如果你担心使用特定于 Webpack 的语义,可以将所有 CSS 放入 src/index.css 中。这样只会产生一个CSS文件。

他会从 src/index.js 导入,但是如果以后迁移到其他构建工具,可以随时删除这个导入。

方便维护

组件中引用,这样使用组件就会自动加载对应的信息。

如果不需要该组件,则这个组件用到的所有css等都不会被使用。

动态加载和一次加载

如果是使用动态加载,单次文件加载的文件小,但是HTTP链接的时间也需要考虑。

如果一个模块里过多的引用CSS,这样节省的加载文件的时间被多次HTTP链接的时间给拖累(虽然单个CSS文件小,但是多次发请求去加载的时间会很久)。

如果是CSS文件不大,将所有CSS 放入 src/index.css 中也是一个不错的方法。

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang

抖音号

抖音号: axihe

Anbang