Обзор
Я работаю над веб-сайтом (многостраничным) для друга, и я решил использовать компоненты дизайна материалов Google (MDC) для Интернета в качестве основы его стиля. Я бы хотел, чтобы он размещался на Firebase с использованием функций и хостинга.
Я работал над этим чуть больше недели и дошел до того, что могу использовать Node.js, Express и EJS для рендеринга нескольких страниц, но я не могу понять, как MDC станет функциональным в этой среде.
Вопрос
Вы видели эту работу раньше? Если да, то как это было сделано и с чего мне начать?
Примечание
Мне удалось запустить его локально, используя этот вопрос. Вот основные файлы, благодаря которым это работает:
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);
}
