样式和资源

样式表

此项目设置使用 Webpack 处理所有资源。 和 Create React App 一致，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" />;
  }
}

CSS modules

项目使用 [name].css?module 文件命名约定支持 CSS Modules 和常规 CSS

Sass 支持

模版默认支持 sass，支持自定义变量导入

@import 'styles/_colors.scss'; // 假设 styles 目录 在 src/ 目录下
@import '~nprogress/nprogress'; // 从 nprogress node模块导入 一个 css 文件

PostCSS 支持

内置 PostCSS Loader, 压缩你的 CSS 并通过 Autoprefixer 自动添加浏览器前缀，使用 PostCSS Preset Env 后处理 CSS

可以根据 Browserslist 规范 调整 package.json 中的 browserslist 来自定义目标支持浏览器。

例如：

.App {
  display: flex;
  flex-direction: row;
  align-items: center;
}

将变成：

.App {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

图片，字体和文件

使用 Webpack，添加图片和字体等静态资源的工作方式与 CSS 类似。

你可以 直接在 JavaScript 模块中 import 文件。

例如：

import React from 'react';
import logo from './logo.png'; // 告诉 Webpack 这个 JS 文件使用了这个图片

console.log(logo); // /logo.84287d09.png

function Header() {
  // 导入结果是图片的 URL 
  return <img src={logo} alt="Logo" />;
}

export default Header;