Question

希望有人可以帮助我，因为我认为这是一个小问题。所以，我使用来自Google的新MDC建立了一个网站：https://material.io/develop/web/docs/getting-started/ 使用npm start命令在本地工作，但是当我像Heroku或Firebase一样在主机中推送它时，什么也没发生。我得到了按钮和一些元素，但组件不在这里。我已从忽略列表中删除了node_module，并且在上传之后也没有。

＆＃13;

app.js

console.log('hello world');

// Button Ripple Effect
import {MDCRipple} from '@material/ripple';
const ripple = new MDCRipple(document.querySelector('.foo-button'));



// AppBar effect
import {MDCTopAppBar} from '@material/top-app-bar/index';
// Instantiation
const topAppBarElement = document.querySelector('.mdc-top-app-bar');
const topAppBar = new MDCTopAppBar(topAppBarElement);

// Drawer
import {MDCTemporaryDrawer} from '@material/drawer/index';

let drawer = new mdc.drawer.MDCTemporaryDrawer(document.querySelector('.mdc-drawer--temporary'));
document.querySelector('.menu').addEventListener('click', () => drawer.open = true);

＆＃13;

scss file
@import "@material/button/mdc-button";
@import "@material/top-app-bar/mdc-top-app-bar";
@import "@material/card/mdc-card";
@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";


.foo-button {
  @include mdc-button-ink-color(teal);
  @include mdc-states(teal);
}

.mdc-card {
    @include mdc-card-fill-color(white)
    @include mdc-card-corner-radius(16px)
	height: 350px;
    width: 350px;
}

＆＃13;

<!DOCTYPE html>
<html>
<title>Dayan Briche</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

 <link rel="stylesheet" href="bundle.css">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
  <link rel="stylesheet" href="bundle.css">

<body class="mdc-typography">

<!--AppBar -->
<header class="mdc-top-app-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">Dayan Briche</span>
    </section>
  </div>
</header>


<!-- Drawer -->


<br><br><br><br><br>

<center><div class="mdc-card">
  <div class="mdc-card__media mdc-card__media--square">
    <div class="mdc-card__media-content">Hello, Material 2 coming</div>
  </div>
  <!-- ... content ... -->
  <div class="mdc-card__actions">
    <div class="mdc-card__action-buttons">
      <button class="mdc-button mdc-card__action mdc-card__action--button">Action 1</button>
      <button class="mdc-button mdc-card__action mdc-card__action--button">Action 2</button>
    </div>
    <div class="mdc-card__action-icons">
      <i class="material-icons mdc-card__action mdc-card__action--icon" tabindex="0" role="button" title="Share">share</i>
      <i class="material-icons mdc-card__action mdc-card__action--icon" tabindex="0" role="button" title="More options">more_vert</i>
    </div>
  </div>
</div>
</center>
<br><br><br>

<p> Im still at the stage of moving to material design 2 <p>





<!--<button class="foo-button mdc-button">
  Button
</button>-->

</body>

</html>

＆＃13;

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']
  }
}
  
      ]
    }]
  },
}];





module.exports.push({
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      }
    }]
  },
});

＆＃13;

 "scripts": {
    "start": "webpack-dev-server"
  },
  "devDependencies": {
    "autoprefixer": "^8.6.2",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.11",
    "extract-loader": "^2.0.1",
    "file-loader": "^1.1.11",
    "node-sass": "^4.9.0",
    "postcss-loader": "^2.1.5",
    "sass-loader": "^7.0.3",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.11.2"
  },
  "dependencies": {
    "@material/button": "^0.36.0",
    "@material/card": "^0.36.0",
    "@material/drawer": "^0.36.0",
    "@material/list": "^0.36.0",
    "@material/top-app-bar": "^0.36.0",
    "@material/typography": "^0.35.0"
  }
}

＆＃13;

我检查了网络控制台，内部没有任何内容，就像一切正常......

谢谢：）

ps：如果您想检查网络控制台https://dayan-briche-website.firebaseapp.com/

，网站就在这里

NodeJS网站在本地工作，不托管

0 个答案: