2016-06-24 13 views
8

Tak na przykład powiedzieć, że zainstalowane coś:Jak odwołać się do CSS z bibliotek zainstalowanych przez npm?

npm install --save something 

i pobiera do

./node_modules/something/ 

i ma folder nie może zwanego styles i w tym folderze masz something.css. Jak bym to ten plik css w moim dokumencie HTML (jeśli mój dokument html był Folder wzdłuż-boku node-modules

Znaczy ja mógłby zrobić to w głowie html:

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

ale czuje się źle iść kopać w katalogu node_modules do rzeczy. Zwłaszcza wtedy, gdy dokument html może musi się minified a następnie wrzucony do jakiejś ./dist/ katalogu. Bo wtedy droga do something.css jest wyłączony ..

czy nie istnieje sposób po prostu po prostu pójść:

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

w dokumencie html - niezależnie od tego, gdzie ona siedzi w swojej strukturze projektu - i będzie to po prostu wiedzieć, gdzie się udać znaleźć ten plik css?

+0

Jakie inne narzędzia znajdują się w twoim zestawie narzędzi? łączysz coś .css z innymi plikami lub po prostu używasz go takim, jaki jest? –

+0

Obecnie używam Sass, który jest kompilowany przez Gulp. "Główny" plik Sassa umieszczony w ./views/styles.scss. – Tiwaz89

+0

Dlaczego nie używać ścieżek bezwzględnych? –

Odpowiedz

2

Jest to pakiet dla nazywany npm-css

W WebPacka można wymagać css jak require('bootstrap.css'), dlatego instalacji css poprzez KMP całkiem użyteczny

jeśli go nie masz, możesz utworzyć zadanie skryptu npm, które wymagałoby (z fs.readFile) wszystkich plików css z node_modules, skompiluj je w jeden plik (co robi npm-css)

0

W rzeczywistości nie ma potrzeby bezpośredniego odwoływania się do plików css w nagłówku HTML. Ponieważ już zaangażowałeś bibliotekę css za pośrednictwem npm, po uruchomieniu npm start, aby uruchomić swój projekt, Node.js załaduje wszystkie node_moudules, które zawiera również potrzebne biblioteki css.

+1

Zakładając, że serwer jest oparty na nodejs. –

+0

Który to nie jest. To jest PHP. – Tiwaz89

0

W zależności od używanego modułu ładującego moduł. Na przykład WebPACK to proszę przeczytać ten link https://github.com/JedWatson/react-select/issues/176

W przeciwnym razie na serwerze trzeba mieć node_modules jak statycznej katalogu plików, a następnie można bezpiecznie robić

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

i skorygować nic złego w tym

Powiązane problemy