小程序如何使用外部的样式文件？写代码案例进行说明

在微信小程序中，可以使用外部样式文件（CSS）来组织和复用样式。为了引入外部CSS，你需要将样式文件放在`app.wxss`之外的一个专门的目录下，例如`styles`目录。然后，在需要应用该样式的页面组件的`wxss`部分引用它。

以下是步骤及代码示例：

1. 创建外部样式文件：假设有一个名为`custom.css`的文件，内容如下：

.button {
  background-color: #007aff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

2. 在`pages/index.wxss`文件中引入外部样式：

<!-- pages/index/index.wxss -->
<import src="/styles/custom.css" /> <!-- 使用相对路径 -->
.wx-container { @apply custom.button; } /* 使用@apply导入并应用自定义样式 */

在这个例子中，`.button`样式会被应用到`.wx-container`元素上。