使用 Firebase、Material 设计组件 (MDC) 和 Node.js

Question

概览

我正在为朋友开发一个网站（多页），我决定使用 Google 的 Material Web 设计组件 (MDC) 作为基础它的造型。我希望使用 Functions 和 Hosting 将其托管在 Firebase 上。

我已经研究了一个多星期，已经到了可以使用 Node.js, Express 的地步 和 EJS 来呈现多个页面，但我似乎无法理解 MDC 如何在这种环境中发挥作用。

问题

你以前看过这部作品吗？如果是这样，它是如何完成的，我应该从哪里开始？

旁注

我已经能够使用 this quide 在本地将其下载到运行。以下是实现此功能的主要文件：

webpack.config.js

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: {
                    name: 'bundle.css',
                },
            },
            { loader: 'extract-loader' },
            { loader: 'css-loader' },
            {
                loader: 'sass-loader',
                options: {
                    includePaths: ['./node_modules']
                }
            },
        ]
    }]
},
}];

index.html

<html>
<head>
    <link rel="stylesheet" href="bundle.css">
</head>
<body>
    <button class="foo-button mdc-button">
        Button
    </button>
</body>
</html>

package.json

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "lint": "eslint .",
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "start": "webpack-dev-server",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "dependencies": {
    "@material/button": "^0.36.0",
    "firebase-admin": "~5.12.1",
    "firebase-functions": "^1.0.3"
  },
  "devDependencies": {
    "css-loader": "^0.28.11",
    "eslint": "^4.12.0",
    "eslint-plugin-promise": "^3.6.0",
    "extract-loader": "^2.0.1",
    "file-loader": "^1.1.11",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.3",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.11.2"
  },
  "private": true
}

app.scss

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

.foo-button {
  @include mdc-button-ink-color(teal);
  @include mdc-states(teal);
}

Answer 1

Firebase Slack 的一名成员能够为我指明正确的方向，因此我不再需要帮助。提供了 link 他们建议的屏幕截图。

Sam Jackson's Response

基本上，我将使用 React 而不是普通的 Node.js。他们似乎已经为 React 开发了一个 MDC 版本，您可以在创建 React 项目时配置它。

MDC React GitHub

使用 Firebase、Material 设计组件 (MDC) 和 Node.js

Using Firebase, Material Design Components (MDC), and Node.js

node.js

firebase

webpack

google-cloud-functions

mdc-components

概览

问题

旁注