Ten przewodnik ilustruje pełną procedurę konfiguracji szybkiego projektu SASS/SCSS w Node.js.
Jak skonfigurować szybki projekt Node.js Sass/SCSS?
SASS wykorzystuje czyste właściwości CSS do wykonania stylizacji na wybranym elemencie. Wzmacnia oryginalny CSS, włączając funkcje matematyczne i zmienne. Stosuje stylizację w DOM w hierarchii. Integrując SASS z Node.js, programista może bardzo łatwo stylizować projekt, aby był bardziej przyciągający wzrok i doskonały pod względem pikselowym.
Wykonajmy poniższe kroki, aby skonfigurować projekt Node.js w środowisku SASS/SCSS.
Krok 1: Instalacja „SASS”
Najpierw zainstaluj „ SASS ” globalnie w projekcie Node.js za pomocą menedżera pakietów węzłów „ npm ” za pomocą tego polecenia:
npm install -g sass
Dane wyjściowe pokazują, że „ tak ” został zainstalowany pakiet:
Krok 2: Tworzenie katalogów
Następnie utwórz osobne katalogi dla plików CSS i SCSS, używając następującego polecenia „mkdir”:
mkdir pliki css
mkdir pliki scss
Można zauważyć, że powyższe „ mkdir ”polecenie utworzyło„ Pliki css ' I ' pliki scss ” katalogi:
Krok 3: Połącz moduł SASS
Teraz użyj opcji „ bezczelne ”, aby obserwować wszelkie modyfikacje w plikach znajdujących się w „ pliki scss ”katalog. W przypadku modyfikacji automatycznie utworzy pliki CSS w połączonym „ Pliki css ” i wstaw te same dane scss do pliku CSS.
Polecenie, które należy wykonać w celu oglądania i łączenia „ bezczelne ” wygląda następująco:
bezczelne --oglądać pliki scss : Pliki cssTeraz saas obserwuje wszelkiego rodzaju modyfikacje w katalogu scssFiles.
Notatka: Powyższe polecenie należy wykonać w wierszu poleceń systemu, ponieważ nie będzie działać na terminalach narzędziowych, takich jak kod Visual Studio.
Krok 4: Tworzenie SCSS i odpowiednich plików CSS
W tym kroku pusty plik o nazwie „ styl scss ' z ' scs ” rozszerzenie zostanie utworzone wewnątrz „ pliki scss katalog:
Następnie dwa pliki o nazwie „ scssStyle.css ' I ' scssStyle.css.map ” zostaną utworzone automatycznie przez „ bezczelne ” moduł wewnątrz „ Pliki css ”, jak pokazano poniżej:
Krok 5: Wstawianie kodu
Na koniec wprowadź kod SCSS w polu „ scssStyle.scss ' jak pokazano niżej:
Teraz ten sam kod w formacie CSS jest automatycznie wstawiany wewnątrz „ scssStyle.css ' plik:
Zilustrujmy wizualnie krok 4 i 5 za pomocą gifa:
W tym przewodniku wyjaśniono kroki tworzenia projektu Node.js SASS\SCSS.
Wniosek
Aby skonfigurować szybki projekt SASS/SCSS w Node.js, najpierw zainstaluj moduł „ bezczelne ”, a następnie utwórz dwa katalogi, jeden dla „ SASS\SCSS ” i drugi dla „ CSS ' akta. Następnie wykonaj polecenie „ bezczelne ”, aby obejrzeć wszelkie modyfikacje w nowo utworzonych katalogach poprzez moduł „ sass – obejrzyj sass:css ' Komenda. W wyniku tej akcji plik „SASS\SCSS” i dwa pliki „CSS” zostaną automatycznie wygenerowane w folderze „CSS”. Jeśli użytkownik zmodyfikuje pliki „SASS\SCSS”, nowe zmiany zostaną automatycznie wstawione do plików CSS. W tym przewodniku wyjaśniono pełną procedurę konfigurowania projektu Node.js SASS\SCSS.