如何转译Material You(MD3)中TS/SCSS编写的Web组件为JS/CSS

结论 #

你当前的操作方向不对，就算解决了眼前的CSS模块报错，离拿到可用的组件产物还有很多配置坑要补，没必要绕远路用Lit starter kit套着编译。

报错原因 #

你碰到的TS2307: Cannot find module './lib/icon-styles.css'只是最表层的配置问题：

• material-web确实基于Lit构建，组件源码里会直接导入CSS文件作为字符串注入Shadow DOM，TypeScript默认不识别.css后缀的导入，也没有对应的类型声明，自然会报找不到模块。
• Lit starter kit的默认构建配置根本没有适配material-web的构建规则，除了CSS导入问题，你后面还会遇到Sass变量预处理、内部路径别名解析、子依赖循环引用一堆问题，手动给starter kit补配置的成本，远高于直接用项目自带的构建流程。

正确操作步骤 #

material-web本身自带完整的构建配置，不需要套其他项目，直接在源码仓库内操作即可：

• 拉取对应提交版本的material-web源码到本地，进入根目录执行npm install安装全量依赖
• 执行项目自带的构建命令，官方预置的配置已经处理好了TS编译、样式加载、路径映射所有逻辑，不会触发模块找不到的报错，构建完成后会输出所有组件的编译后JS文件
• 如果需要类似MD2版本mwc-bundle-button.js的单文件组件产物，可以在全量构建完成后，用rollup或者esbuild对目标组件的入口做单独打包，记得把lit相关的基础依赖标记为外部，避免重复打包运行时代码
• 打包完成后，使用方式和之前的MD2组件完全一致，在页面引入JS文件后就能直接用对应的组件标签。

注意：2022年6月这个节点的MD3版本Material Web还在早期开发阶段，组件API、样式规则后续大概率会有破坏性调整，本地构建的产物只适合提前体验功能，别直接用到生产环境。等官方正式发版后，直接从CDN或者NPM引入是最稳妥的方案。

MD2版本Material Web的常规用法参考：

<!-- CDN引入 -->
<script defer
        type="module"
        src='https://unpkg.com/@material/mwc-button?module'>
</script>

<!-- 本地打包文件引入 -->
<script defer
        type="module"
        src='../(path)/web-components/mwc-bundle-button.js'>
</script>

<!-- 组件调用 -->
<mwc-button label="button label"></mwc-button>

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