【问题标题】：Precompile Material Design For Web为 Web 预编译 Material Design
【发布时间】：2021-04-07 22:07:03
【问题描述】：
我将在具有自定义主题的 PHP 应用程序中使用 Material Design For Web。我正在寻找有关如何使用我的自定义主题变量预编译 JS 和 CSS 的说明，以便我可以像使用 CDN 一样拉入 js 和 css。似乎 CDN 确实提供了一些自定义主题颜色选项，但没有一个看起来像我正在寻找的，这就是为什么我要创建自己的预编译 css 和 js 文件
使用自定义主题变量进行预编译的步骤是什么，以便我可以拥有一个 dist css 和 js 文件？
【问题讨论】：
标签：
javascript
web
material-design
material-components
material-components-web
【解决方案1】：
虽然这个问题有点过于笼统，但我确实理解它出现的原因。 material-components-web 不是很容易开始。文档和示例很少，有时甚至很难理解如何做一些基本的事情。
为了能够使用您需要的自定义主题变量来编译它：
- 如果您还没有 SASS 编译，请在您的项目中设置它。
- 添加 npm package "material-components-web" 作为依赖项。
- 在您的根 SCSS 文件中，使用您的颜色配置 MDC 主题，如下所示：
@use '@material/theme' with (
$primary: #212121,
$on-primary: #ffffff,
$secondary: #ffc629,
$background: #33333D,
$surface: #ffffff,
$on-surface: #000000
);
- 之后，您可以像这样包含 MDC 的 SCSS 的其余部分：
@use 'material-components-web/material-components-web'
- 由于您只需要自定义CSS，建议您参考现有的预编译JS。否则你还需要配置 babel 编译。
您可以以basic-material-starter-kit 为例。