이 글은 주로 vue-cli + sass를 여는 올바른 방법을 그림과 텍스트 형식으로 소개합니다. 매우 훌륭하고 참고할만한 가치가 있으니 모두에게 도움이 되었으면 좋겠습니다. vue-cli로 빌드된 프로젝트에서 sass를 구성하는 방법에 대해 인터넷에서 찾은 답변은 기본적으로 다음과 같습니다. 하지만 이는 매우 현명하지 못한 접근 방식입니다. node-sass 설치 프로세스의 다양한 함정은 말할 것도 없고, 내장된 <style> 또한 구성 요소를 매우 혼란스럽게 만듭니다. 특정 메소드를 수정할 때 수십, 수백 줄의 CSS 코드를 스크롤 휠을 드래그해야 하거나, 스타일 세트를 수정하고 싶지만 Vue 파일에 흩어져 있기 때문에 해당 CSS 파일을 찾을 수 없다고 상상해 보세요. . . . </p> <p>내 생각에는 sass 파일을 별도로 관리한 다음 컴파일된 CSS 파일을 main.js에 직접 도입하는 것이 올바른 접근 방식이 되어야 합니다. iView와 마찬가지로 ElementUI도 모두 이 접근 방식을 채택합니다. </p> <p>이 접근 방식에 동의하고 채택할 계획이라면 다음 구체적인 예를 살펴보세요. </p> <p><br><img alt="" src="https://img.php.cn/upload/article/000/054/025/9229cd66df0d99d4d5886eaff8fbe919-1.png"></p> <p>프로젝트 구조는 위와 같으며 스타일 폴더 아래에는 관리 및 향후 유지 관리를 용이하게 하기 위해 scss 파일이 분류되어 있습니다. 그런 다음 main.scss에 모든 scss 스타일 조각을 도입하고 sass --watch main.scss:main.css 명령을 사용하여 scss 파일을 듣고 컴파일하여 CSS 파일로 만듭니다. 마지막으로 main.css 파일을 main.js에 추가합니다. 이런 방식으로 요소에 클래스를 직접 추가한 다음 scss에 스타일을 작성할 수 있습니다. </p> <p><br><img alt="" src="https://img.php.cn/upload/article/000/054/025/9229cd66df0d99d4d5886eaff8fbe919-2.png"></p> <p>물론 매번 이러한 명령을 수동으로 입력하고 싶지는 않습니다. 초기 아이디어는 dev 명령을 수정하는 것입니다. <br></p> <p><img alt="" src="https://img.php.cn/upload/article/000/054/025/0e1bf7627b82840432c7d5df521d594e-3.png"></p> <p>하지만 이전 명령만 실행하면 효과가 나타나지 않습니다. 매번 시작됩니다. 그래서 이를 구현하기 위해 일괄 처리를 사용하는 것을 고려했습니다. <br></p> <p><img alt="" src="https://img.php.cn/upload/article/000/054/025/0e1bf7627b82840432c7d5df521d594e-4.png"><br><img alt="" src="https://img.php.cn/upload/article/000/054/025/0e1bf7627b82840432c7d5df521d594e-5.png"></p> <p>이 두 개의 .bats를 루트 디렉터리에 넣은 다음 package.json을 구성합니다. <br></p> <p><img alt="" src="https://img.php.cn/upload/article/000/054/025/0e1bf7627b82840432c7d5df521d594e-6.png"></p> <p>이 방법으로 npm run을 사용할 수 있습니다. 한 번의 클릭으로 개발 핫 리로드 및 Sass Watch를 시작하세요. </p> <p>관련 권장 사항: </p> <p><a href="http://www.php.cn/css-tutorial-384832.html" target="_self">CSS 전처리기 Sass 예제에 대한 자세한 설명</a></p> <p><a href="http://www.php.cn/js-tutorial-379524.html" target="_self">웹스트롬 Sass 주석의 중국어 오류 문제를 해결하는 방법</a></p> <p><a href="http://www.php.cn/css-tutorial-358063.html" target="_self">SASS 학습 요약</a></p>
