Проблема со связыванием файла CSS с файлом PUG?

Я пытаюсь связать файл CSS с файлом PUG, используя синтаксис «ссылка». Когда я пытаюсь это сделать, я получаю следующее сообщение об ошибке:

«Отказано в применении стиля из «http://локальный:3000/CSS/styles.css», поскольку его тип MIME («текст/html») не является поддерживаемым типом MIME таблицы стилей, и включена строгая проверка MIME».

  • Я попытался включить атрибут type="text/css". это не сработало
  • Я попытался проверить правильность пути к файлу css, используя этот синтаксис:
    style
        include ../CSS/styles.css

Это работает и позволяет мне убедиться, что путь к файлу css правильный. Однако вместо этого я хочу использовать синтаксис «link()», как показано в моем файле index.pug.

Голова index.pug:

    head
        link(rel='stylesheet' href='../CSS/styles.css' type='text/css')

Файл app.js:

    const express = require('express');
    const http = require('http');
    const path = require('path');

    const app = express();
    const viewsPath = path.resolve(__dirname, "views");
    app.set("views", viewsPath);
    app.set('view engine', 'pug');

    app.get("/", function (request, response) {
        response.render("index");
    });
    http.createServer(app).listen(3000);

Вы пытались указать свой файл CSS как абсолютный путь вместо относительного?

elbrant 11.05.2019 16:49

Когда я пытаюсь это сделать, я получаю следующее сообщение об ошибке: Not allowed to load local resource: file:///D:/Google%20Drive/Projects/Dashboard/CSS/styles.css

swamp blues 11.05.2019 16:51
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
2
753
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно серверировать файлы css как static. Также использование absolute paths предпочтительнее при подаче экспресс-доставки.

Предполагая, что ваш Dashboard содержит только файлы, безопасные для доступа в Интернет.

app.use(express.static('Dashboard'))

// In your html, note absolute path
href='/CSS/styles.css'

Вы также можете рассмотреть virtual path, указав точку монтирования:

app.use('/static', express.static('Dashboard'))

// html
href='/static/CSS/styles.css'

Я не думаю, что смогу обслуживать файлы pug с помощью модуля expres.static. Он работает с файлами .html, но, похоже, это не относится к файлам pug, он просто говорит: «Не удается получить /»

swamp blues 11.05.2019 17:29

О, Я ВИЖУ. теперь это работает, и мне даже не нужно было указывать абсолютный путь. Спасибо. Не совсем понимаю, почему это так работает, но это так...

swamp blues 11.05.2019 17:36
Don't really understand why it works, вам нужно сделать базовые статические файлы доступными для клиента, обслужив его. (надеюсь это просто)
1565986223 11.05.2019 20:10

Другие вопросы по теме