无需使用NPM，如何在Web项目中使用Material Design 3？

嘿，我完全懂你的处境——拿着被管理员锁定的Chromebook，没法用NPM来构建Material Design 3，之前一直用MDL 1.3，现在想升级却卡壳了对吧？别发愁，咱们直接用CDN引入MD3的资源就行，完全不需要本地构建，步骤超简单：

• 第一步，先把你原来项目里的Material Design Lite 1.3资源链接删掉，就是这几段：

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.orange-yellow.min.css">
  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  

• 第二步，引入Material Design 3的CDN资源，把下面这些代码放到你的HTML头部（<head>标签里）和尾部（</body>标签前）：
  样式文件（放在<head>里）：

  <!-- 引入Roboto字体，MD3的默认字体 -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap">
  <!-- 引入Material Icons图标 -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <!-- 引入MD3核心样式 -->
  <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
  

  脚本文件（放在</body>标签前）：

  <!-- 引入MD3核心脚本 -->
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  

• 第三步，接下来你就可以直接按照MD3的组件规范来使用各种UI元素了，比如按钮、卡片、文本框这些。和之前MDL的用法有一些细节差异，但因为是CDN直接引入，不需要任何打包构建操作，刚好适配你没法用NPM的Chromebook环境。

如果你想要更稳定的版本，也可以把代码里的latest换成具体的版本号（比如11.0.0），这样能避免最新版本的兼容性问题。

备注：内容来源于stack exchange，提问作者Bynet Official