vue-cli + sass를 여는 올바른 방법

이 글은 주로 vue-cli + sass를 여는 올바른 방법을 소개합니다. 매우 훌륭하고 참고할 가치가 있습니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

vue-cli로 빌드한 프로젝트에서 sass를 구성하는 방법에 대해 인터넷에서 찾은 답변은 기본적으로 다음과 같습니다.

하지만 스타일은 각

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

이 접근 방식에 동의하고 채택할 계획이라면 다음 구체적인 예를 살펴보세요.

프로젝트 구조는 위와 같으며 스타일 폴더 아래에는 관리 및 향후 유지 관리를 용이하게 하기 위해 scss 파일이 분류되어 있습니다. 그런 다음 main.scss에 모든 scss 스타일 조각을 도입하고 sass --watch main.scss:main.css 명령을 사용하여 scss 파일을 듣고 컴파일하여 CSS 파일로 만듭니다. 마지막으로 main.css 파일을 main.js에 추가합니다. 이런 방식으로 요소에 클래스를 직접 추가한 다음 scss에 스타일을 작성할 수 있습니다.

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

하지만 이전 명령만 실행하면 효과가 나타나지 않습니다. 매번 시작됩니다. 그래서 이를 구현하기 위해 일괄 처리를 사용하는 것을 고려했습니다.

이 두 개의 .bats를 루트 디렉터리에 넣은 다음 package.json을 구성합니다.

이 방법으로 npm run을 사용할 수 있습니다. 한 번의 클릭으로 개발 핫 리로드 및 Sass Watch를 시작하세요.

관련 권장 사항:

vue-cli 최적화 웹팩 구성의 자세한 예

vue-cli vscode 구성의 자세한 예 eslint

vue-cli는 vue 애플리케이션을 빠르게 구축하고 웹팩 패키징을 자세히 구현합니다

위 내용은 vue-cli + sass를 여는 올바른 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!