이번에는 vue-cli+sass 사용법에 대해 자세히 설명드리고, vue-cli+sass 사용 시 주의사항은 무엇인지 살펴보겠습니다. 각 단일 파일의 에 스타일을 직접 작성하는 것은 매우 현명하지 못한 일이라고 생각합니다. node-sass 설치 프로세스의 다양한 함정은 말할 것도 없고, 내장된 <style> 또한 구성 요소를 매우 혼란스럽게 만듭니다. 특정 메소드를 수정할 때 수십, 수백 줄의 CSS 코드를 스크롤 휠을 드래그해야 하거나, 스타일 세트를 수정하고 싶지만 Vue 파일에 흩어져 있기 때문에 해당 CSS 파일을 찾을 수 없다고 상상해 보세요. . . . </p> <p> 제 생각에는 sass 파일을 별도로 관리한 다음 컴파일된 CSS 파일을 main.js에 직접 도입하는 것이 올바른 접근 방식이어야 한다고 생각합니다. iView와 마찬가지로 ElementUI도 모두 이 접근 방식을 채택합니다. </p> <p>스타일 폴더에는 쉽게 관리하고 나중에 유지 관리할 수 있도록 분류된 scss 파일이 포함되어 있습니다. 그런 다음 main.scss에 모든 scss 스타일 조각을 도입하고 다음을 사용하십시오. sass --main.scss:main.css 보기 이 명령은 scss 파일을 수신하고 CSS 파일로 컴파일합니다. 마지막으로 main.css 파일을 main.js에 추가합니다. 이런 방식으로 요소에 클래스를 직접 추가한 다음 scss에 스타일을 작성할 수 있습니다. </p> <p> 물론 매번 수동으로 이러한 명령을 입력하고 싶지는 않습니다. 초기 아이디어는 dev 명령을 수정하는 것입니다. </p> <p>그러나 매번 이전 명령만 시작되기 때문에 효과를 얻을 수 없습니다. 그래서 다음을 달성하기 위해 일괄 처리를 사용하는 것을 고려했습니다. </p> <p> 이 두 개의 .bat를 루트 디렉터리에 배치한 다음 package.json을 구성합니다. </p> <p style="text-align:center;"> </p> <p> 이러한 방식으로 npm run dev를 사용하여 한 번의 클릭으로 핫 리로드 및 sass watch를 시작할 수 있습니다. </p> <p>이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! </p> <p>추천 자료: </p> <p><a href="http://www.php.cn/js-tutorial-392854.html" target="_blank">Date 객체에 대한 카운트다운 기능을 만드는 방법</a><br></p> <p><a href="http://www.php.cn/js-tutorial-392852.html" target="_blank">vue</a><br></p> <!--content end-->에서 v-model의 동적 사용에 대한 자세한 설명
