问题描述
我将在具有自定义主题的 PHP 应用程序中使用 Material Design For Web。我正在寻找有关如何使用我的自定义主题变量预编译 JS 和 CSS 的说明，以便我可以像使用 CDN 一样提取 js 和 css。看起来 CDN 确实提供了一些自定义主题颜色选项，但没有一个看起来像我正在寻找的，这就是为什么我要创建自己的预编译 css 和 js 文件
使用自定义主题变量进行预编译以便我可以拥有一个 dist css 和 js 文件的步骤是什么？
解决方法
虽然这个问题有点笼统，但我确实理解它为什么会出现。 material-components-web 不是很容易开始。文档和示例很少，有时甚至很难理解如何做基本的事情。
为了能够使用您需要的自定义主题变量编译它：
- 如果您还没有，请在您的项目中设置 SASS 编译。
- 添加 npm 包“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 作为示例。