Cant нагрузки CSS файл

Я пытаюсь использовать шаблоны для входа (Взял из: 50 Free HTML5 And CSS3 Login Forms For Your Website 201 Cant нагрузки CSS файл

Мой каталог создан как это:

-css 
| 
-- style.css 
- js 
| 
-- index.js 
| 
index.html

Глава файла index.html выглядит:

<head> 
    <meta charset="UTF-8"> 
    <title>Sign-Up/Login Form</title> 
    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 


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


</head>

и тело содержит включает в себя scrips:

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 

    <script src="js/index.js"></script>

Мои node.js выглядит:

// Import Required Module 
var express = require('express') 
var app = express() 
var bodyParser = require('body-parser') 


// css 
var path = require('path') 
app.use(express.static(path.join(__dirname, 'public'))); 

// Create instances 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({  
    extended: true 
})); 

// Get 
app.get('/', function (req, res) { 
    console.log('Get: /'); 
    res.sendFile('LoginTemplate/index.html', {root: __dirname }) 
}) 

/* 
app.get('css/style.css', function (req, res) { 
    console.log('Get: css/style.css'); 
    res.sendFile('css/style.css', {root: __dirname }) 
}) 
*/ 


// Listner 
app.listen(3001, function() { 
    console.log('Example app listening on port 3001!') 
})

При загрузке файла HTML я получаю сообщение об ошибке:

GET http://127.0.0.1:3001/css/style.css

Я пытался искать решение на: Can not get CSS file

И создал общую папку и скопировал папку css внутри, но она все еще не работает.

Как загрузить jss-файлы css &?

источник

2017-02-21 Anonymous

Мы должны создать общедоступную директорию в корневом каталоге и поместить в нее свой каталог css –

// Import Required Module 
var express = require('express') 
var app = express() 
var bodyParser = require('body-parser') 

// Create instances 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({  
    extended: true 
})); 

// Get 
app.get('/', function (req, res) { 
    console.log('Get: /'); 
    res.sendFile('LoginTemplate/index.html', {root: __dirname }) 
}) 


app.get('/css/style.css', function (req, res) { 
    console.log('Get: css/style.css'); 
    res.sendFile('LoginTemplate/css/style.css', {root: __dirname }) 
}) 

app.get('/js/index.js', function (req, res) { 
    console.log('Get: js/index.js'); 
    res.sendFile('LoginTemplate/js/index.js', {root: __dirname }) 
}) 


// Listner 
app.listen(3001, function() { 
    console.log('Example app listening on port 3001!') 
})

источник

2017-02-21 20:13:52 user3668129

Все выглядит хорошо в настройках вашего кода и папки. Из URL-адреса, который вы публикуете (http://127.0.0.1:3001/css/style.css), я предполагаю, что ошибка заключается в вашем экземпляре сервера. Проверьте файлы определения и убедитесь, что у сервера есть разрешение на чтение css/style.css.

Я столкнулся с этой проблемой, когда файлы и папки не имеют прав доступа. Быстрая проверка для этого - это что-то похожее на sudo chmod -R 0777 [path_to_your_project] (системы linux и Mac будут использовать эту команду). Эта команда дает полный доступ ко всем пользователям и гостям для чтения, записи и выполнения ваших файлов и является быстрым способом проверить, является ли проблема правами пользователя.

Я также столкнулся с этой проблемой, когда мой веб-сервер настроен неправильно. В таких случаях я случайно разрешил веб-серверу совместно использовать все файлы в корневой папке (например:/var/www), но не в каких-либо подпапках, поэтому (используя пример) папка/var/www/images будет анализируется веб-сервером и рассматривается как область, которая защищена. В этом случае веб-сервер имеет доступ, но он отказывается обслуживать файлы на основе правил конфигурации.

Я надеюсь, что одно из этих двух исправлений поможет вам направлять вас по правильному пути к решению.

Удачи вам!

источник

2017-02-21 18:12:33

ответ

Смежные вопросы