如何在HTML/Express项目中使用Material You Web？含无JS/Node方案及CDN查询

无需JavaScript/Node的使用方式 #

如果只需要Material 3的基础设计样式（颜色、排版、静态组件外观），可以完全不用JavaScript或Node环境。通过CDN引入Material 3的纯CSS样式文件，配合原生HTML标签和指定类名就能实现符合规范的UI：

1. 引入基础样式CDN：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@material/web@1.0.1/theme/md-color-styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@material/web@1.0.1/typography/md-typescale-styles.css">

2. 在HTML中使用类名实现样式：

<!-- 模拟填充按钮样式 -->
<button class="md-sys-color-primary-container md-typescale-label-large" style="padding: 8px 16px; border-radius: 28px; border: none; cursor: pointer;">
  填充按钮
</button>

注：这种方式仅能实现静态样式，无法使用Material Web的交互组件（如带动画的按钮、下拉菜单等），这类组件依赖Web Components，必须引入JavaScript。

在Express应用中使用Material 3 Web #

如果需要完整的交互组件，有两种可行方案：

方式1：直接使用CDN引入 #

无需npm安装，在HTML中直接引入组件的ES模块即可：

<!-- 引入单个组件（推荐，减少体积） -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@material/web@1.0.1/button/filled-button.js"></script>
<!-- 使用组件 -->
<md-filled-button>点击触发交互</md-filled-button>

方式2：npm安装后通过Express托管静态资源 #

若你之前npm安装后无法正常运行，大概率是静态资源配置或路径问题，按以下步骤操作：

1. 安装依赖：

npm install @material/web

2. 在Express入口文件中配置静态资源，将@material/web的dist目录暴露为可访问路径：

const express = require('express');
const path = require('path');
const app = express();

// 托管Material Web组件资源
app.use('/material', express.static(path.join(__dirname, 'node_modules/@material/web/dist')));

// 渲染首页
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'views/index.html'));
});

app.listen(3000, () => {
  console.log('服务运行在3000端口');
});

3. 在HTML文件中引入组件模块：

<script type="module" src="/material/button/filled-button.js"></script>
<md-filled-button>填充按钮</md-filled-button>

常见问题排查：

• 确保script标签添加了type="module"，Material Web组件基于ES模块
• 检查静态资源挂载路径与HTML中src路径是否匹配，避免404错误
• 若使用自定义主题，需额外引入主题配置的JS或CSS

可用的CDN链接 #

以下是jsDelivr提供的稳定CDN链接（版本号可根据官方更新调整）：

• 单个组件JS：https://cdn.jsdelivr.net/npm/@material/web@1.0.1/[组件目录]/[组件文件].js，例如：
  • 填充按钮：https://cdn.jsdelivr.net/npm/@material/web@1.0.1/button/filled-button.js
  • 文本输入框：https://cdn.jsdelivr.net/npm/@material/web@1.0.1/textfield/outlined-text-field.js
• 纯CSS样式文件：
  • 主题颜色：https://cdn.jsdelivr.net/npm/@material/web@1.0.1/theme/md-color-styles.css
  • 排版规则：https://cdn.jsdelivr.net/npm/@material/web@1.0.1/typography/md-typescale-styles.css
• 全量组件JS（不推荐，体积过大）：https://cdn.jsdelivr.net/npm/@material/web@1.0.1/all.js

内容的提问来源于stack exchange，提问作者DJ Cook