web-dev-qa-db-fra.com

Comment puis-je inclure des fichiers CSS à l'aide de node, express et ejs?

J'essaie de suivre les instructions pour https://stackoverflow.com/a/18633827/2063561 , mais je ne parviens toujours pas à charger mon styles.css. 

De app.js

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

Dans mes .ejs, j’ai essayé ces deux lignes

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

Ni charge le css. Je suis allé dans la console du développeur, remarquant que le type est défini sur 'text/html' au lieu de 'text/css'. 

Mon chemin ressemble à

.
./app.js
./public
    /css
        /style.css
cssnode.jsexpressejs
24
stealthysnacks

Utilisez ceci dans votre fichier server.js

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

et ajouter des css comme

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

ne pas besoin/avant css comme 

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

J'ai utilisé les étapes suivantes pour résoudre ce problème

  1. créer un nouveau dossier (statique) et déplacer tous les fichiers js et css dans ce dossier.
  2. puis ajoutez app.use ('/ static', express.static ('static'))
  3. ajouter des css comme <link rel = "stylesheet" type = "text/css" href = "/ static/style.css" />
  4. redémarrez le serveur pour voir l'impact après les modifications.
1
sonu singh

utiliser dans votre fichier principal .js

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

utiliser dans votre fichier principal .html

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

La raison pour laquelle vous obtenez une erreur parce que vous utilisez une virgule au lieu d'un concat + après __dirname.

0
White Lantern

C'est simple si vous utilisez express.static(__dirname + 'public'), n'oubliez pas de mettre une barre oblique devant public qui est express.static(__dirname + '/public') ou utilisez express.static('public'), cela fonctionnera également; et ne changez rien dans les liens CSS. 

0
Dhananjaya