【发布时间】：2018-06-14 20:43:00
【问题描述】：
概述
我正在为一个朋友开发一个网站（多页），我决定使用 Google 的 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);
}
【问题讨论】：
-
这是一个相当模糊的描述。您是否遇到了具体问题？
-
抱歉，我现在会说得更清楚。
-
@DougStevenson 我重新格式化了问题。
-
我仍然不确定你在问什么。不就是一些 JS 和样式吗？
-
不幸的是，在 Firebase 上托管的情况下不是这样。我在他们的社区 Slack 中找到了一个有用的答案。我将改用 React - MDC 有一个你可以使用的 React 项目配置。 github.com/material-components/material-components-web-react
标签： node.js firebase webpack google-cloud-functions mdc-components