Fatal编程技术网
  • css/
  • 无法访问node.js html文件中的CSS

无法访问node.js html文件中的CSS

css node.js express server

无法访问node.js html文件中的CSS,css,node.js,express,server,Css,Node.js,Express,Server,当我运行我的网站的css不加载，我得到以下错误 Refused to apply style from 'http://localhost:5000/server/nodeClient/public/css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. 我已经阅读了4篇关于堆栈溢出的文章，但是我还没有能够解决我尝

当我运行我的网站的css不加载，我得到以下错误

Refused to apply style from 'http://localhost:5000/server/nodeClient/public/css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
我已经阅读了4篇关于堆栈溢出的文章，但是我还没有能够解决我尝试过的方法中未包含的问题

  • 从文件的css头中删除注释
  • 使用多种不同的组合更改路径命令
  • 在应用程序上使用别名。使用如下命令
我认为我的问题在于使用正确的路径，因为我的公用文件夹位于server/nodeClient/public/css中

设置详细信息 配置该文件夹的server.js命令是

app.use(express.static('../server/nodeClient/public/css'))


        <link rel="stylesheet" type="text/css" href="../server/nodeClient/public/css/main.css" />
html链接代码为

app.use(express.static('../server/nodeClient/public/css'))


        <link rel="stylesheet" type="text/css" href="../server/nodeClient/public/css/main.css" />
我有另一个应用程序。下面使用的命令是语法

app.use(express.static('../client/build'));
这驻留在{root}/client/build中

下面是完整的代码示例 server.js embed.ejs
将您在中设置的路径更改为。static（）将成为浏览器中的根路径。所以

<link rel="stylesheet" href="/main.css" />
在
.static（）
中设置的任何路径都将成为浏览器中的根路径。所以
谢谢！我现在正在研究这一点，这只是一个小小的知识。我将ejs文件更改为href=“/css/main.css”，它可以正常工作。我想每一个组合，但它现在的工作-谢谢！如果您提交了答案，我将其打勾为完整 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="../server/nodeClient/public/css/main.css" />

        <link
            rel="stylesheet"
            href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
            integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
            crossorigin="anonymous"
        />
        <title>Infoshot Document</title>
    </head>
    <body>
        <p>Name of document (from json.docData) : <%= data.document.title%></p>
        <div class="container">
            <%- include('partials/header.ejs') %>
            <main class="blue">
                <div class="test-box-medium blue">sample</div>
            </main>
            <footer class="green">
                <div class="test-box-medium green">sample</div>
            </footer>
        </div>
    </body>
</html>


#vertical-list-paragraph-1 {
    background: lightgray;
    color: lightgray;
}

.word-title {
    color: black;
}

.decision {
    flex-grow: 4;
    padding: 0 1rem 0 1rem;
}

.embedCode {
    background: white;
    color: black;
    padding: 3rem;
}

.container-flex-column {
    display: flex;
    flex-direction: column;
}
.container-flex-column-card {
    padding-bottom: 0.5rem;
    border-radius: 10px 10px 10px 10px;
}
.container-flex-column-spacebetween {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.container-flex-column-center {
    display: flex;
    flex-direction: column;
}

.container-flex-row {
    display: flex;
    flex-direction: row;
}
.container-flex-row-valign {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}
.container-flex-row-cardtop {
    display: flex;
    flex-direction: row;
    border-radius: 10px 10px 3px 3px;
}
.container-flex-row-spacebetween {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.container-flex-row-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.container-flex-row-align-baseline {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}
.container-flex-row-card {
    border-radius: 20px;
    border: 2px solid gray;
}
.container-flex-row-stretch {
    flex-grow: 4;
}

.container-flex-width-1 {
    width: 30%;
}

.container-flex-width-2 {
    flex-grow: 2;
}

.container-flex-width-3 {
    flex-grow: 3;
}

.container-img-full {
    width: 100%;
    height: 40px;
}

.container-full-width {
    min-width: 40px;
}

i {
    color: white;
    font-size: 10px;
}

.container-child-list {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    transition: background-color 0.2s ease;
    flex-grow: 1;
    min-height: 100px;
    margin: 0;
}

.container-paragraph {
    border-radius: 5px;
}

.container-decisionBox {
    flex-grow: 4;
    align-self: center;
    text-align: center;
}

.container-word {
    border-radius: 4px;
}

form {
    width: 100%;
}

input:not([type]),
input[type='text']:not(.browser-default) {
    font-size: 1rem;
    height: 1rem;
}

.chapter-text > input[type='text'],
.page-text > input[type='text'],
.paragraph-text > input[type='text'],
.word-text > input[type='text'] {
    width: 100%;
    padding: 0px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    color: #f8f8ff;
}

.chapter-text > input[type='text'] {
    font-size: 1.2rem;
    height: 2.2rem;
    text-align: center;
}

.page-text > input[type='text'] {
    font-size: 1rem;
    height: 1.2rem;
    text-align: center;
}

.paragraph-text > input[type='text'] {
    font-size: 1rem;
    height: 1.2rem;
    color: #636b6f;
}

.word-text > input[type='text'] {
    font-size: 1rem;
    height: 0.8rem;
    color: #f8f8ff;
    z-index: -1;
}

.urlForm {
    z-index: 2;
}

.border {
    border: 1px black solid;
}
.border-bottom {
    border-bottom: 1px black solid;
}
.border-green {
    border: 2px green solid;
}
.border-green-thick {
    border: 8px green solid;
}
.border-yellow {
    border: 2px yellow solid;
}

.margin-medium {
    margin: 5rem;
}

.margin-left {
    margin: 0.4rem;
}

.margin-left-xx {
    margin: 0.2rem;
}

.margin-bottom-xx {
    margin-bottom: 0.2rem;
}

.margin-none {
    margin: 0;
}

.padding-pt5 {
    padding: 0.5rem;
    box-sizing: border-box;
}

.padding-header {
    padding: 0.9rem 0.9rem 0.9rem 0.9rem;
}

.padding-3 {
    padding: 3rem;
    box-sizing: border-box;
}

.padding-3-px {
    padding: 3px;
    box-sizing: border-box;
}

.padding-thick-sides {
    padding: 5px 20px 5px 20px;
}

.padding-medium-sides {
    padding: 0px 5px 0px 5px;
}

.padding-none {
    padding: 0;
}

.width-30pct {
    width: 70%;
}

.width-33pct {
    width: 33%;
}

.width-100-pct {
    width: 100%;
}

.width-100-pct-min {
    width: 100%;
    min-width: 600px;
}

.width-500-px {
    width: 800px;
}

.width-flex-grow-1 {
    flex-grow: 1;
}

.width-flex-grow-2 {
    flex-grow: 2;
}

.width-flex-grow-3 {
    flex-grow: 3;
}

.height-1 {
    min-height: 1rem;
}

.height-2 {
    min-height: 2rem;
}

.height-5 {
    min-height: 5rem;
}

.align-center {
    vertical-align: bottom;
}

html {
    font-size: 20px;
}

h1 {
    font-size: 5rem;
    text-align: center;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2rem;
    text-align: center;
    padding: 0 0 0 0;
    margin: 0;
}

.h2 {
    font-size: 5rem;
    text-align: center;
    padding: 0 0 0 0;
    margin: 0;
}

h3 {
    font-size: 3rem;
    font-weight: 400;
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}
h3.contents-section {
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0rem;
}

h4 {
    font-size: 2.5rem;
    margin: 1rem 0rem 0.3rem 0rem;
    font-weight: 400;
}
h4.contents-item {
    margin: 1rem 0rem 0rem 0rem;
    font-weight: 300;
    font-size: 2rem;
}

h5 {
    font-size: 1.5rem;
    margin: 0rem 0rem 0.5rem 2rem;
    font-weight: 200;
}

.text-align-center {
    text-align: center;
}

p {
    font-size: 2rem;
    margin: 0rem 0rem 2rem 0rem;
    font-weight: 200;
}

li {
    list-style-type: none;
    font-size: 2rem;
}
li.indented {
    margin: 1rem 3rem 1rem 3rem;
}
li.indented-2 {
    margin: 0.5rem 0rem 0.5rem 5rem;
}
li.bullets {
    font-weight: 200;
    margin: 1rem 0rem 1rem 3rem;
    list-style-type: disc;
}
li.bullets-indented {
    margin: 1rem 3rem 1rem 3rem;
}
li.bullets-indented-2 {
    margin: 0.5rem 0rem 0.5rem 5rem;
    font-size: 1.4rem;
    font-weight: 200;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-bottom {
    vertical-align: bottom;
}

.text-size-x {
    font-size: 1rem;
    padding: 0.2rem;
    margin: 0;
}

.text-size-xx {
    font-size: 0.8rem;
    padding: 0.5rem;
    margin: 0;
}

.text-size-xxx {
    font-size: 0.5rem;
    padding: 0.5rem;
    margin: 0;
}

.table-side-header {
    font-size: 1.5rem;
    padding: 1rem;
    height: 5rem;
}

.contents-page-number {
    font-size: 1.5rem;
    font-weight: 200;
}

.text-white {
    color: white;
    background: white;
    padding: 10px;
    box-sizing: border-box;
}

.input[type='text'] {
    color: red;
    font-size: 50px;
}

.title-page {
    padding: 8px;
    display: flex;
    flex-direction: column;
    border-radius: 10px 10px 3px 3px;
}

.title-chapter {
    padding: 8px;
    display: flex;
    flex-direction: column;
    border-radius: 20px 20px 0px 0px;
}

.title-paragraph {
    padding: 0 0px 0 0px;
}

.title-word {
    font-size: 0.8rem;
}

.chapter-text,
.page-text,
.paragraph-text,
.word-text {
    width: 100%;
    padding: 0px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    color: #f8f8ff;
}

.chapter-text {
    font-size: 1.2rem;
    height: 2.2rem;
    text-align: center;
}

.page-text {
    font-size: 1rem;
    height: 1.2rem;
    text-align: center;
}

.paragraph-text {
    font-size: 1rem;
    height: 1.2rem;
    color: #636b6f;
    padding-left: 3px;
}

.word-text {
    font-size: 1rem;
    height: 0.6rem;
    color: white;
    border-radius: 25px;
    padding: 0 0 25px 3px;
    text-decoration: underline;
}

.word-text:hover {
    font-size: 1rem;
    height: 0.6rem;
    color: blue;
    border-radius: 25px;
    padding: 0 0 25px 3px;
    text-decoration: underline;
}

.material-icons {
    color: lightblue;
    justify-content: center;
    padding: 4px 0 4px 0;
}

.material-icons:hover {
    color: blue;
    cursor: pointer;
}

button:focus {
    outline: none;
    background-color: #ee6e73;
}

i .handle {
    margin: auto;
    width: 15px;
}

.btn-small {
    border-radius: 10px;
    margin-right: 10px;
}

/* This file contains styles used for rapid prototyping only */
.test-box-medium-red,
.test-box-medium-blue,
.test-box-medium-green {
    min-width: 5rem;
    min-height: 3rem;
}

.test-box-medium-red,
.test-box-medium .red {
    background: red;
}

.test-box-medium-blue,
.test-box-medium .blue {
    background: blue;
}

.test-box-medium-green,
.test-box-medium .greem {
    background: green;
}

.test-box-nowidth {
    width: 100%;
    background: lightblue;
}

.test-flex-row {
    display: flex;
    flex-direction: row;
}

/* CSS reset code */
* {
    padding: 0;
    margin: 0;
}

button {
    border: 0;
    background: inherit;
}

/* High level CSS defaults for rem */
a {
    color: red;
}

/* NO MORE HERE */


<link rel="stylesheet" href="/main.css" />