Sass(Scss) 시작하기 (+ PSSecurityException 보안오류 해결법)

📌 Sass란?

CSS의 단점을 보완하기 위해 만든 CSS 전처리기이다.
효율적으로 CSS를 관리하고 모듈화할 수 있으며 여러가지 조건문, 반복문같은 기능들을 활용할 수 있어서 편리하다.

Sass vs Scss 차이점

- Sass : 중괄호 { } 없이도 입력 가능하기 때문에 오류가 나기 쉬움.
- Scss : Sass를 보완하기 위해 중괄호{ }를 쓰는 것.

Scss에서 중괄호{}가 없는 것이 Sass이다.

중괄호{}를 없애 용량을 줄일 수 있지만 실수로 인해 컴파일 에러가 날 수 있기 때문에 SCSS를 주로 사용한다.

Scss사용은? 그냥 Sass를 설치하고 확장자를 Scss로 쓰면 된다. 

 

---

📌 프로젝트 파일에 Scss만들기

1. style.scss파일을 생성

나는"study-scss"라는 프로젝트 폴더를 만든 후 VScode에서 열었다. (프로젝트 폴더명은 아무 이름이나 상관 없다.)

프로젝트 폴더 안에 "새 폴더"를 만들고 폴더명은 "scss",

scss폴더 안에 "새 파일"을 만들고 파일명은"style.scss"로 생성한다.

 

2. 컴파일하기

웹 브라우저는 css라는 확장자를 읽는데 우리가 작성한 건 scss이다.

scss를 css로 바꿔주기 위해 컴파일을 해줘야한다.

터미널을 열고 명령어 "sass --watch scss/style.scss css/style.css"를 입력하면 자동으로 컴파일이 된다.

- scss/style.scss는 현재 작업중인 scss 파일의 경로
- css/style.css는생성할 css파일 경로

터미널에 컴파일 명령어 입력

css/style.css가 생성된 모습

확인해보면 "css폴더"에 "style.css","style.css.map" 파일이 예쁘게 잘 생성된것을 볼 수 있다~~ ✌️

 

📌 css.map 파일이 생기는 이유

브라우저에서는 css파일을 읽기때문에 컴파일을 했지만, css만 보고 원래 작성한 코드가 어디에 있는지는 알기 어렵다.

그렇기 때문에 컴파일시 css.map가 함께 생성되고, map파일로 인해서 우리가 원래 작성한 scss 코드의 위치를 알 수 있게된다.

 

---

⛔ 보안 오류 발생 시

컴파일 중 보안오류가 뜨는 경우

sass : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\tit3\AppData\Roaming\npm\sass.ps1 파일을 로드
할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 
참조하십시오.
위치 줄:1 문자:1
+ sass --watch scss/style.scss css/style.css
+ ~~~~
    + CategoryInfo          : 보안 오류: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

컴파일중 터미널에 이런 오류가 뜨는 경우가 있다.

 

해결방법

에러 코드를 구글에 검색하니 다른 사람들이 해결 한 방법을 찾을 수 있었다.

아마도 뭔가 권한이 없다는 것 같다.

 

우선 윈도우 "터미널 > 오른쪽클릭"해서 "관리자 권한으로 실행"시켜 준다.

 

터미널에 "ExecutionPolicy"를 입력하면 현재 상태가 나오는데

"Restricted"라고 출력되는 것을 볼 수 있다.

무언가 제한이 되어있어서 컴파일 도중 오류가 뜬 것 같다.

- ExecutionPolicy : 현재 상태 확인
- Restricted : 모든 스크립트 제한

현재 상태 입력 후 Restricted가 출력된 상태

 

제한을 풀어주기 위한 명령어를 입력한다.
"Set-ExecutionPolicy Unrestricted" 또는
"Set-ExecutionPolicy RemoteSigned" (이것을 추천)

- Set-ExecutionPolicy : 실행 정책 변경을 위한 명령어
- Unrestricted : 서명되지 않은 스크립트를 실행할 수 있으며, 악성 스크립트를 실행할 위험이 있기때문에 권장하지 않는 옵션이라고 한다.
- RemoteSigned : 로컬 컴퓨터에 작성되거나 인터넷에서 다운로드되지 않은 스크립트에는 디지털 서명이 필요하지 않고 실행 가능하다.
🔗출처 : PowerShell 실행 정책 정보

다시 현재상태 확인을 위해 "ExecutionPolicy"을 입력하면
이제 "RemoteSigned"로 출력되는 것을 볼 수 있다.

 

VScode로 돌아가서 컴파일 명령어 "sass --watch scss/style.scss css/style.css"를 입력하면
css파일이 잘 생성되는것을 볼 수 있다.