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