为 Web 预编译材料设计

如何解决为 Web 预编译材料设计

我将在具有自定义主题的 PHP 应用程序中使用 Material Design For Web。我正在寻找有关如何使用我的自定义主题变量预编译 JS 和 CSS 的说明，以便我可以像使用 CDN 一样提取 js 和 css。看起来 CDN 确实提供了一些自定义主题颜色选项，但没有一个看起来像我正在寻找的，这就是为什么我要创建自己的预编译 css 和 js 文件

使用自定义主题变量进行预编译以便我可以拥有一个 dist css 和 js 文件的步骤是什么？

解决方法

虽然这个问题有点笼统，但我确实理解它为什么会出现。 material-components-web 不是很容易开始。文档和示例很少，有时甚至很难理解如何做基本的事情。

为了能够使用您需要的自定义主题变量编译它：

1. 如果您还没有，请在您的项目中设置 SASS 编译。
2. 添加 npm 包“material-components-web” 作为依赖项。
3. 在您的根 SCSS 文件中，使用您的颜色配置 MDC 主题，如下所示：

@use '@material/theme' with (
  $primary: #212121,$on-primary: #ffffff,$secondary: #ffc629,$background: #33333D,$surface: #ffffff,$on-surface: #000000
);

4. 之后，您可以像这样包含 MDC 的其余 SCSS：

@use 'material-components-web/material-components-web'

5. 由于您只需要自定义 CSS，我建议您参考现有的预编译 JS。否则，您还需要配置 babel 编译。

您可以使用 basic-material-starter-kit 作为示例。