0

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

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

4

1 回答 1

2

虽然这个问题有点太笼统了，但我确实理解它出现的原因。不是很容易开始。文档和示例很少，有时甚至很难理解如何做一些基本的事情。

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

  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
);
  1. 之后，您可以像这样包含 MDC 的 SCSS 的其余部分：
@use 'material-components-web/material-components-web'
  1. 由于您只需要自定义 CSS，我建议您参考现有的预编译 JS。否则你还需要配置 babel 编译。

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

于 2021-01-24T09:51:31.033 回答