Come fare riferimento ai CSS dalle librerie installate tramite npm?

Question

Così, per esempio dire che ho installato qualcosa:

npm install --save something 

e si scarica in

./node_modules/something/ 

ed ha una cartella in là forse chiamato styles e in che cartella che avete something.css. Come vorrei includere il file CSS nel mio documento HTML (se il mio documento HTML è stato la cartella sul lato lungo node-modules

Voglio dire che potuto fare questo nella mia testa html:?

<link rel="stylesheet" href="./node_modules/something/styles/something.css" type="text/css" media="screen" /> 

Ma si sente male per andare scavare nella vostra node_modules directory per le cose. Soprattutto se il documento HTML ha bisogno forse di ottenere minified e poi gettato in una directory ./dist/. Perché allora il percorso di something.css è spento ..

non c'è un modo semplicemente basta andare:

<link rel="stylesheet" href="something.css" type="text/css" media="screen" /> 

nel documento html - indipendentemente da dove si sta seduti nella vostra struttura del progetto - e ti basta sapere dove andare a trovare quel file css?

Answer 1

C'è un pacchetto per questo chiamato npm-css

In webpack è possibile richiedere css come require('bootstrap.css'), questo è il motivo per cui l'installazione di CSS tramite npm molto utile

se non lo avete, è possibile creare un compito di script npm che richiede (con fs.readFile) tutti i file CSS dai node_modules, li compila in un singolo file (che è ciò che npm-css fa)

Answer 2

In realtà non è necessario fare riferimento ai file css in modo esplicito nel codice html. Poiché hai già coinvolto la libreria css via npm, una volta eseguito npm start per eseguire il tuo progetto, Node.js caricherà tutti i node_moudules che include anche le librerie css di cui hai bisogno.

Answer 3

A seconda del caricatore di modulo che si sta utilizzando. Per esempio Webpack allora leggete questo link https://github.com/JedWatson/react-select/issues/176

In caso contrario, nel server è necessario avere node_modules come directory dei file statici e quindi si può tranquillamente fare

<link rel="stylesheet" href="./node_modules/something/styles/something.css" type="text/css" media="screen" /> 

e correggere nulla di male in quel