로컬 서버에서 SASS 설정

6011 단어 beginnerstutorialwebdevproductivity
Sass 코드를 작성하려면 먼저 로컬에 설치해야 합니다. 기본적으로 브라우저에 알려진 언어가 아닙니다.

이제 Sass 환경을 설정하는 프로세스를 진행하여 자체 Sass 코드를 작성하고 컴파일할 수 있습니다.

참고: Sass가 컴파일되면 브라우저가 해석하고 렌더링할 수 있는 일반 CSS 코드로 변환됩니다.

환경 설정



시작하기 전에 컴퓨터에 npm이 설치되어 있어야 합니다. Node.js과 함께 번들로 제공됩니다. here에서 설치할 수 있습니다. 아직 설치하지 않았다면 설치하십시오.

Node.js가 설치되어 있는지 확실하지 않은 경우 터미널에서 node -v를 실행하십시오.

버전 번호가 보이면 설치된 것입니다!

터미널에 대한 참고 사항:

SASS를 처음 사용하는 경우 터미널에서 명령을 실행하는 것이 처음일 수도 있습니다. 그것은 보이는 것처럼 위압적이지 않습니다! 더 많은 경험을 쌓으면 시간이 정말 절약됩니다.

Windows PC에서 터미널을 열려면 Windows 아이콘을 마우스 오른쪽 버튼으로 클릭하고 Windows Powershell을 선택합니다. Mac에서는 Finder > 응용 프로그램 > 유틸리티 > 터미널로 이동합니다.

폴더 구조



프로젝트 폴더를 만들어 봅시다! 다음과 같이 구성됩니다.

sass-project
   |- sass
   |- css


이 구조를 만들려면 터미널을 열고 cd 명령을 통해 sass 프로젝트를 설치하려는 폴더로 변경합니다.

그런 다음 다음 명령을 실행합니다.

mkdir sass-project
cd sass-project
mkdir -p sass css


파일 구조



이 폴더에 index.html 및 main.scss가 필요합니다.

이러한 파일을 만들려면 다음을 실행합니다.

touch index.html
cd sass
touch main.scss
cd ..


또한 SASS를 컴파일하려면 기본 CSS 스타일시트가 필요합니다.

cd css
touch style.css


index.html을 열고 다음 코드를 붙여넣습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Index page</title>
    <link rel=”stylesheet” href=”css/style.css”>
  </head>
  <body>

  </body>
</html>


이것은 스타일시트가 연결된 상용구 코드입니다!

프로젝트 디렉토리 초기화



npm을 사용하는 모든 프로젝트를 초기화해야 합니다. 이렇게 하려면 아직 sass-project 폴더에 있는지 확인하고 다음 명령을 실행합니다.

npm init -y


그러면 프로젝트에 대한 package.json 파일이 생성됩니다. 이 과정의 뒷부분에서 이 파일의 구성에 대해 자세히 알아볼 것입니다!

node-sass 설치



node-sass는 .scss를 .css로 컴파일할 수 있게 해주는 라이브러리입니다.

다음 명령을 실행하여 node-sass를 dev 종속성으로 설치합니다.

npm install node-sass --save-dev


참고: 개발 종속성은 프로젝트의 빌드 단계에서만 사용됩니다. 런타임에는 포함되지 않습니다.

Sass 코드를 CSS로 컴파일하기



다음으로 컴파일을 실행할 npm 스크립트를 만들어야 합니다.

이전에 만든 package.json 파일의 스크립트 섹션에 이 스크립트를 추가합니다.

"compile-sass": "node-sass sass/main.scss css/style.css"


각 스크립트를 쉼표로 구분하는 것을 잊지 마세요!

여기에서는 main.scss를 기본 Sass 파일로 지정하고 style.css를 컴파일된 CSS 파일로 지정했습니다.

SASS 코드를 CSS로 컴파일하려면 다음을 실행하기만 하면 됩니다.

npm run compile-sass


라이브 리로드



프로젝트에 라이브 리로드도 추가해 봅시다! 이렇게 하려면 다음을 실행하여 전역으로 설치합니다.

npm install live-server -g


이제 여전히 Sass 프로젝트 폴더에 있는지 확인하고 다음을 실행합니다.

live-server


이와 마찬가지로 HTTP에서 로컬로 실행되는 프로젝트와 함께 매우 깔끔한 개발 환경을 갖게 됩니다.

두 개의 별도 터미널 창에서 live-server 및 npm run compile-sass를 계속 실행해야 합니다.

이제 로컬 컴퓨터에 프로젝트 환경이 모두 설정되었습니다!

결론



이 블로그 게시물이 마음에 드셨다면 제가 매일 기술 관련 게시물을 게시하는 곳을 팔로우하세요!
이 기사가 마음에 들었고 팁을 남기고 싶다면 — 클릭 here

🌎 연결하자


  • Portfolio
  • Hashnode
  • Medium
  • Github
  • Codepen
    • CosmWasm과 스마트 컨트랙트 작성 (1부)
    임의의 점에서 원추면까지의 최단 거리를 찾는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage