vue-cli+sass 사용법에 대한 자세한 설명

이번에는 vue-cli+sass 사용법에 대해 자세히 설명드리고, vue-cli+sass 사용 시 주의사항은 무엇인지 살펴보겠습니다.

각 단일 파일의 에 스타일을 직접 작성하는 것은 매우 현명하지 못한 일이라고 생각합니다. node-sass 설치 프로세스의 다양한 함정은 말할 것도 없고, 내장된 또한 구성 요소를 매우 혼란스럽게 만듭니다. 특정 메소드를 수정할 때 수십, 수백 줄의 CSS 코드를 스크롤 휠을 드래그해야 하거나, 스타일 세트를 수정하고 싶지만 Vue 파일에 흩어져 있기 때문에 해당 CSS 파일을 찾을 수 없다고 상상해 보세요. . . .

제 생각에는 sass 파일을 별도로 관리한 다음 컴파일된 CSS 파일을 main.js에 직접 도입하는 것이 올바른 접근 방식이어야 한다고 생각합니다. iView와 마찬가지로 ElementUI도 모두 이 접근 방식을 채택합니다.

스타일 폴더에는 쉽게 관리하고 나중에 유지 관리할 수 있도록 분류된 scss 파일이 포함되어 있습니다. 그런 다음 main.scss에 모든 scss 스타일 조각을 도입하고 다음을 사용하십시오. sass --main.scss:main.css 보기 이 명령은 scss 파일을 수신하고 CSS 파일로 컴파일합니다. 마지막으로 main.css 파일을 main.js에 추가합니다. 이런 방식으로 요소에 클래스를 직접 추가한 다음 scss에 스타일을 작성할 수 있습니다.

물론 매번 수동으로 이러한 명령을 입력하고 싶지는 않습니다. 초기 아이디어는 dev 명령을 수정하는 것입니다.

그러나 매번 이전 명령만 시작되기 때문에 효과를 얻을 수 없습니다. 그래서 다음을 달성하기 위해 일괄 처리를 사용하는 것을 고려했습니다.

이 두 개의 .bat를 루트 디렉터리에 배치한 다음 package.json을 구성합니다.

이러한 방식으로 npm run dev를 사용하여 한 번의 클릭으로 핫 리로드 및 sass watch를 시작할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

vue-cli+sass 사용법에 대한 자세한 설명