编辑：

Question

我正在使用Google的Material Design作为良好的UI设计工具，以帮助我创建用于个人编程体验的Web应用程序。我想知道如何使用Sass更改“顶部应用栏”的颜色。我找不到文件。

以下是文档的链接：https://material.io/develop/web/components/top-app-bar/

基本上，我想将其更改为任何颜色的十六进制颜色。这是我当前的代码：

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Chat App</title>
        <link rel="stylesheet" href="styles.scss" type="text/scss">
        <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
        <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    </head>
    <body>
        <header class="mdc-top-app-bar mdc-top-app-bar--short blue-bar">
            <div class="mdc-top-app-bar__row">
                <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                    <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
                    <span class="mdc-top-app-bar__title">Title</span>
                </section>
                <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
                    <a href="#" class="material-icons mdc-top-app-bar__action-item">settings</a>
                    <a href="#" class="material-icons mdc-top-app-bar__action-item">account_circle</a>
                </section>
            </div>
        </header>
        <p>
            Nothing to see here.
        </p>
    </body>
</html>

SCSS文件

$base-color: #AD141E;
.blue-bar { @include mdc-top-app-bar-fill-color($base-color); }

我将类命名为.blue-bar只是因为我觉得自己像蓝色。它不一定是蓝色的。我只想知道如何更改栏的默认紫色。

编辑：

我刚刚意识到，必须先将scss文件转换为CSS，然后才能使用它。我的新问题是：由于我使用的是Google的Material Design CSS，我该如何使用Sass进行编辑并更改颜色？

Answer 1

请注意，您的$ base-color实际上是红色。请改用.blue-bar { @include mdc-top-app-bar-fill-color(#0000ff); }或其他任何蓝色

有关将scss编译为css的信息，请阅读Quick start guide。这使得不必使用unpkg。基本上，您想设置webpack来将您的scss文件捆绑到单个css文件中。请注意，在webpack.config.js中，您有2条输出路径。

module.exports = [{
  entry: './app.scss',
  output: {
    // This is necessary for webpack to compile
    // But we never use style-bundle.js
    filename: 'style-bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              //This is where you specify the output for your bundled css file.
              //outputPath specifies where the file is stored (i'm doing this from my head so unsure about pathing)
              //Name is the filename.
              outputPath: './css'
              name: 'bundle.css',
            },
          },
          { loader: 'extract-loader' },
          { loader: 'css-loader' },
          { loader: 'sass-loader' },
        ]
      }
    ]
  },
}];

Answer 2

更改MDC顶部应用栏的填充颜色

@use "@material/top-app-bar"; // namespace top-app-bar contains fill-color mixin
@use "@material/top-app-bar/mdc-top-app-bar"; // contains CSS classes

.mdc-top-app-bar {
  // fill-color($color) is defined in the top-app-bar namespace
  @include top-app-bar.fill-color(#29E);
}

为Web编译MDC

对于那些不构建Node.js应用程序或未使用打包程序的人...

获取 @material 来源，例如：

安装npm
安装mdc：npm i material-components-web
使用您的node_modules / @ material副本

使用 dart-sass 将SCSS编译为CSS：

从https://github.com/sass/dart-sass/releases/安装sass二进制文件
编译代码：sass -s压缩-I ../node_modules/ input.scss bundle.css

使用 esbuild 编译您的JavaScript代码：

安装二进制文件（其他安装方法（单击以展开））：https://github.com/evanw/esbuild
编译JS：esbuild --bundle --minify input.js --outfile = bundle.js

不幸的是，esbuild没有提供path参数，并且js文件的父目录中必须有node_modules目录。

如何在Google的Material Design中更改应用程序顶部的填充颜色？

HTML

SCSS文件

编辑：

2 个答案:

更改MDC顶部应用栏的填充颜色

为Web编译MDC