本文共 603 字，大约阅读时间需要 2 分钟。

1. 添加样式表

在业务项目中设置使用Webpack处理所有资产是非常常见的一项操作。Webpack提供了一种自定义方式来扩展传统的JavaScript外类依赖的概念。对于要从JavaScript文件导入CSS文件，这种方法提供了一种便利的实现方式。

Button.css样式表

.Button {  padding: 20px;}

Button.js组件代码

import React, { Component } from 'react';import './Button.css'; // 在Webpack中导入样式表class Button extends Component {  render() {    return (      
   
            这是一个使用样式表按钮组件的示例      
   
    );  }}

这种方法的好处在于，在开发环境中，可以立即看到样式表的更新效果。而在生产环境中，所有CSS文件会被Webpack处理成一个紧凑的文件。

如果担心这种方法特定于Webpack，可以将所有样式表放入src/index.css文件中，它仍然会被导入到src/index.js中，方便后续迁移到其他构建工具时删除该导入。

这种方法虽然简单，但需要注意的是，这种样式表的导入方式会让项目对特定的构建工具耕耋较多。在未来若需要迁移其他构建工具，可能需要添加额外的配置。