Как включить css файлы с помощью node, express и ejs?

Я пытаюсь следовать инструкциям qaru.site/info/311250/..., но я до сих пор не могу загрузить свой файл styles.css.

Из app.js

app.use(express.static(path.join(__dirname, 'public')));

В моем .ejs я пробовал обе эти строки

<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/public/css/style.css" />

Не загружает css. Я пошел в консоль разработчика, заметив, что для типа "text/html" вместо "text/css".

Мой путь выглядит как

.
./app.js
./public
    /css
        /style.css

Ответы

Ответ 1

Используйте это в файле server.js

app.use(express.static(__dirname + '/public'));

и добавьте css, например

<link rel="stylesheet" type="text/css" href="css/style.css" />

dont need/before css like

<link rel="stylesheet" type="text/css" href="/css/style.css" />

Ответ 2

1. Создайте новую папку с именем "public", если ее не существует.

2. Создайте новую папку с именем "css" в только что созданной "публичной" папке

3. Создайте свой CSS файл по пути public/css

4. На вашей html-ссылке css, т.е. <link rel="stylesheet" type="text/css" href="/css/style.css">

//обратите внимание, что href использует косую черту (/) раньше, и вам не нужно включать 'public'

5.В вашем app.js есть: app.use(express.static('public'));

Бум. Работает !!

Ответ 3

Используйте в своем основном файле .js:

app.use('/css',express.static(__dirname +'/css'));

используйте в .html основном .html файле:

<link rel="stylesheet" type="text/css" href="css/style.css" />

Причина, по которой вы получаете ошибку, потому что вы используете запятую вместо concat + после __dirname.

Ответ 4

Я использовал следующие шаги, чтобы решить эту проблему

  1. создайте новую папку (статическую) и переместите все файлы js и css в эту папку.
  2. затем добавьте app.use('/static', express.static('static'))
  3. добавить CSS как <link rel= "stylesheet" type = "text/css" href= "/static/style.css"/>
  4. перезапустите сервер, чтобы увидеть влияние после изменений.

Ответ 5

Это просто, если вы используете express.static(__dirname + 'public') тогда не забудьте поставить косую черту перед public, который является express.static(__dirname + '/public') или использовать express.static('public') также собирается работать; и ничего не меняйте в ссылках CSS.

Ответ 6

Пользовательские таблицы стилей, которые у нас есть, являются статическими страницами в нашей локальной файловой системе. Чтобы сервер обслуживал статические файлы, мы должны использовать

app.use(express.static("public"));

где,

public - это папка, которую мы должны создать внутри нашего корневого каталога, и она должна иметь другие папки, такие как css, images и т.д.

Структура каталогов будет выглядеть следующим образом:

enter image description here

Затем в своем html файле обратитесь к style.css как

<link type="text/css" href="css/styles.css" rel="stylesheet">

Ответ 7

Используйте это в файле server.js

app.use(express.static('public'));

Ответ 8

Вышеупомянутые ответы наполовину сработали, и я не знаю, почему они не работали на моей машине, но я должен был сделать следующее для этого.

  1. Создан каталог в корне

    /public/js/

  2. Вставьте это в ваш файл server.js с именем, совпадающим с именем каталога, созданного выше. Примечание добавление /public как первый параметр

    app.use('/public',express.static('public'));

  3. Наконец, на странице HTML, на которую нужно импортировать файл JavaScript,

    <script src="public/js/bundle.js"></script>