create-react-app之样式和资产

邢弘业
2023-12-01

 

1.添加样式表

 

该项目设置使用webpack处理所有资产。webpack提供了一种自定义方式来“扩展” JavaScript以外import的概念。

要表示JavaScript文件依赖于CSS文件,您需要从JavaScript文件导入CSS:

 

Button.css

.Button {
  padding: 20px;
}

Button.js

import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return <div className="Button" />;
  }
}

这不是React所必需的,但是许多人发现此功能很方便。您可以在此处了解这种方法的好处。但是,您应该意识到,这使得您的代码与Webpack相比,对其他构建工具和环境的可移植性更差。

在开发中,以这种方式表达依赖关系允许您在编辑样式时即时重新加载样式。在生产中,所有CSS文件都将.css在构建输出中串联为一个缩小的文件。

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

 

 类似资料: