Question

今天我开始潜入Polymer。我想要做的是使用Node和Polymer构建一个简单的站点。目前，我们的目标是从头开始构建一个Starter Kit，以学习基础知识。

我已经使用Node和express设置了服务器。我使用app.use(express.static(__dirname + '/public'));来提供资源。除了使用ejs引擎渲染网站外。

渲染的模板是从Starter Kit复制粘贴的。

<head>
<meta charset="UTF-8">
<title>Polymor</title>

<!-- 1. Load webcomponents-lite.min.js for polyfill support. -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js">
</script>

<!-- 2. Use an HTML Import to bring in some elements. -->
<link rel="import" href="/elements.html">
</head>

<body unresolved class="fullbleed layout vertical">

<paper-drawer-panel id="paperDrawerPanel">
    <div drawer>
        <!-- Drawer Toolbar -->
        <paper-toolbar id="drawerToolbar">
            <span class="paper-font-title">Menu</span>
        </paper-toolbar>

        <!-- Drawer Content -->
        <paper-menu>
            <a data-route="home" href="/">
                <iron-icon icon="home"></iron-icon>
                <span>Home</span>
            </a>

            <a data-route="users" href="/users">
                <iron-icon icon="info"></iron-icon>
                <span>Users</span>
            </a>

            <a data-route="contact" href="/contact">
                <iron-icon icon="mail"></iron-icon>
                <span>Contact</span>
            </a>
        </paper-menu>
    </div>

    <paper-header-panel main mode="waterfall-tall">

        <!-- Main Toolbar -->
        <paper-toolbar id="mainToolbar">
            <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
            <span class="flex"></span>

            <!-- Toolbar icons -->
            <paper-icon-button icon="refresh"></paper-icon-button>
            <paper-icon-button icon="search"></paper-icon-button>

            <!-- Application name -->
            <div class="middle paper-font-display2 app-name">Polymer Starter Kit</div>

            <!-- Application sub title -->
            <div class="bottom title">A Subtitle</div>

        </paper-toolbar>
    </paper-header-panel>
</paper-drawer-panel>


  </body>

</html>

我希望这能正常工作，但是缺少一些.css文件。我在控制台中收到的错误是：Resource interpreted as Document but transferred with MIME type text/css: "http://127.0.0.1:8080/bower_components/paper-drawer-panel/paper-drawer-panel.css".

paper-drawer-panel本身包含在elements.html文件中并已安装。我只是安装了所有纸和铁元素。

这是我所拥有的视觉效果，我现在预计左边的侧边栏会有所不同。 enter image description here

由于我是Polymer的新手，我不知道在哪里解决此问题，或者我应该使用不同的方式来提供公共文件？

Polymer和Nodejs（express），Stylsheets正在加载错误的MIME

0 个答案: