总览
我正在为一个朋友创建一个网站(多页),因此我决定将Google的Material Design组件(MDC)用于Web作为其样式的基础。我希望使用功能和托管将其托管在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);
}
最佳答案
Firebase Slack的一名成员能够为我指明正确的方向,因此我不再需要帮助。提供了指向他们所建议内容的屏幕快照的链接。
Sam Jackson's Response
基本上,我将使用React代替普通的Node.js。他们似乎已经为React开发了一个MDC版本,您可以在创建React项目时对其进行配置。
MDC React GitHub
关于node.js - 使用Firebase, Material 设计组件(MDC)和Node.js,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50865651/