如何包含和引用特定于模块的CSS文件？

<div class="module">
  <h1>模块标题</h1>
  <p>模块内容</p>
</div>

<style>
.module {
  background-color: #f1f1f1;
  padding: 10px;
}
.module h1 {
  color: #333;
}
.module p {
  font-size: 14px;
}
</style>

<!-- index.html -->
<div class="module">
  <h1>模块标题</h1>
  <p>模块内容</p>
</div>

<link rel="stylesheet" href="module.css">

/* module.css */
.module {
  background-color: #f1f1f1;
  padding: 10px;
}
.module h1 {
  color: #333;
}
.module p {
  font-size: 14px;
}

// module.js
import styles from './module.css';

const moduleElement = document.createElement('div');
moduleElement.classList.add(styles.module);

const titleElement = document.createElement('h1');
titleElement.textContent = '模块标题';
titleElement.classList.add(styles.title);

const contentElement = document.createElement('p');
contentElement.textContent = '模块内容';
contentElement.classList.add(styles.content);

moduleElement.appendChild(titleElement);
moduleElement.appendChild(contentElement);

export default moduleElement;

/* module.css */
.module {
  background-color: #f1f1f1;
  padding: 10px;
}
.title {
  color: #333;
}
.content {
  font-size: 14px;
}