프로젝트를 만들 때 vue에서 사용하는 sass는 CSS 보조 도구를 강화하는 것을 의미하며 sass는 buby 언어로 작성된 CSS 전처리 언어이며 html로 작성되었습니다. CSS 사양에서는 중괄호와 세미콜론을 사용하지 않습니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, Vue3 버전, Dell G3 컴퓨터.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!