如何构建自己的 material-components-web.min.css？答案

【问题标题】：How do I build my own material-components-web.min.css?如何构建自己的 material-components-web.min.css？
【发布时间】：2018-01-26 18:53:02
【问题描述】：

我一直在使用 material-components-web.min.css 以 MDC Web 方式设置 Flask 应用程序的样式。我可以手动查看并编辑我想要的颜色，但是是否有一个简单的方法和框架可以让我定义自己的调色板，然后用它构建一个 material-components-web.min.css？

【问题讨论】：

标签： material-design material-components

【解决方案1】：

MDC 可以轻松自定义颜色。您可以通过 Sass 变量或 CSS 自定义属性覆盖默认主题颜色。 CSS 自定义属性支持运行时主题。

CSS Custom Properties

:root {
  --mdc-theme-secondary: #018786;
  --mdc-theme-secondary-light: #02cecc;
  --mdc-theme-secondary-dark: #004040;
  --mdc-theme-background: #fff;
}

SASS

首先用 npm 安装 @material/theme 包

npm install --save @material/theme

然后像这样创建一个sass文件来修改调色板：

$mdc-theme-primary: #9c27b0; 
$mdc-theme-secondary: #ffab40;
$mdc-theme-background: #fff;

@import "@material/theme/mdc-theme";

编译 sass 文件，输出的 CSS 文件包含所有将覆盖默认调色板的规则。确保在您的 HTML 中链接此 CSS 文件。

文档：https://material.io/components/web/catalog/theme/

如果您有任何其他问题或疑问，请发表评论。

【讨论】：

CSS 自定义属性解决方案在运行时确实会改变颜色，但它存在一些问题，即某些元素的颜色不会改变。您能否为我提供一些有关 SASS 解决方案的指南？我不熟悉nodejs&npm&webpack&etc，通过哪个命令可以得到outputted CSS？
您需要通过 SASS 编译器运行您的 SASS 文件，这里有一些：sass-lang.com/install