vue가 프로젝트를 생성할 때 sass는 무엇을 의미하나요?

프로젝트를 만들 때 vue에서 사용하는 sass는 CSS 보조 도구를 강화하는 것을 의미하며 sass는 buby 언어로 작성된 CSS 전처리 언어이며 html로 작성되었습니다. CSS 사양에서는 중괄호와 세미콜론을 사용하지 않습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, Vue3 버전, Dell G3 컴퓨터.

vue로 프로젝트를 만들 때 sass는 무엇을 의미하나요?

Sass(Syntactically Awesome StyleSheets)는 buby 언어로 작성된 CSS 전처리 언어로 html과 동일한 엄격한 들여쓰기 스타일을 가지며 CSS 작성 사양과 많은 차이가 있습니다. . 내부 및 외부에는 중괄호와 세미콜론이 사용되지 않으므로 널리 사용되지 않습니다.

Sass는 CSS를 향상시키는 보조 도구로, CSS 구문을 기반으로 하는 변수, 중첩 규칙, 상속, 가져오기(인라인 가져오기) 및 기타 고급 기능을 추가합니다. 강력하고 우아합니다. Sass 및 Sass 스타일 라이브러리(예: Compass)를 사용하면 스타일 파일을 더 잘 구성 및 관리하고 프로젝트를 더 효율적으로 개발하는 데 도움이 됩니다. 접미사는 ​​.sass입니다.

// deom.sass
#sidebar
　　width: 30%
　　background-color: #faa

확장된 지식:

vue-cli3은 sass/scss를 통합하는 두 가지 방법을 제공합니다

• 프로젝트 생성 시 전처리기 sass를 선택하세요

• sass-loader 수동 설치

Me 방법 1 : 언제 vue 프로젝트를 생성하려면 전처리기 sass를 선택하세요

vue-cli3를 사용하여 vue 프로젝트를 생성하세요

Vue CLI v4.5.15
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) 
> Manually select features

위아래 키를 움직여 수동으로 기능 선택을 선택하세요. 이는 생성된 프로젝트의 구성을 수동으로 선택한다는 의미입니다.

Enter 키를 눌러 다음 단계로 들어가면 화면은 다음과 같습니다:

? Check the features needed for your project: 
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support        
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

위아래 키를 움직이고 CSS 전처리기에서 스페이스바를 클릭하여 선택하면 CSS 전처리 도구가 있음을 나타냅니다. 필수의.

그 후 CSS 전처리 도구를 작동하면 다음과 같이 표시됩니다.

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
  Less
  Stylus

Sass/SCSS(node-sass 포함)를 CSS 전처리기로 선택합니다.

완료 후 프로젝트는 자동으로 sass-loader 및 node-sass 종속성을 설치합니다.

방법 2: 수동 설치

프로젝트 생성 시 CSS 전처리기를 선택하지 않은 경우 sass-loader 및 node-sass를 수동으로 설치하여 scss를 통합할 수도 있습니다.

npm install -D sass-loader node-sass

sass 사용

이 시점에서는 스타일을 추가해야 합니다. lang을 scss로 지정하면 됩니다.

<style>
$color = red;
</style>

vue 서비스 clie는 자동으로 우리가 설치한 sass-loader를 scss 콘텐츠용 로더로 사용합니다.

【관련 추천: "vue.js tutorial"】

위 내용은 vue가 프로젝트를 생성할 때 sass는 무엇을 의미하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!