Vue-cli 단일 파일 구성 요소에 less, sass 및 css 스타일을 도입하는 다양한 방법에 대한 간략한 설명

이제 Vue-cli 단일 파일 구성 요소에 less, sass 및 css 스타일을 도입하는 다양한 방법에 대해 간략하게 설명하겠습니다. 이는 좋은 참조 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

vue-cli에는 sass 및 lass 구성이 내장되어 있습니다. 필요한 경우 두 개의 모듈을 직접 다운로드하면 webpack은 자동으로 적절한 로더를 사용하여 lang 속성을 기반으로 이를 처리합니다.

sass를 사용해야 한다면 다음을 설치하세요:

npm install node-sass --save-dev 
npm install sass-loader --save-dev

less를 사용해야 한다면 다음을 설치하세요:

npm install less --save-dev 
npm install less-loader --save-dev

Sass의 인라인 쓰기:

<style lang="sass" scoped> 
 //sass样式 
</style>

less의 인라인 쓰기:

<style lang="less" scoped> 
 //less样式 
</style>

css 인라인으로 작성됨:

<style lang="css" scoped> 
 //css样式 
</style>

sass가 인용됨:

<style lang="sass" src="./index.sass"></style>

less가 인용됨:

<style lang="less" src="./index.less"></style>

css가 인용됨:

<style lang="css"> 
   @import &#39;./index.css&#39; 
</style> 
 或者 
<style lang="css" src="./index.css"></style>

위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 도움이 되기를 바랍니다. 앞으로도 모든 사람에게.

관련 기사:

Angular는 대문자/소문자 필터를 사용하여 대소문자 변환 기능 예시를 구현합니다.

Angular는 작업 이벤트 명령 ng-click을 사용하여 여러 매개변수 예시를 전달합니다.

JavaScript 코드를 구현합니다. txt 파일 업로드 미리보기 기능

위 내용은 Vue-cli 단일 파일 구성 요소에 less, sass 및 css 스타일을 도입하는 다양한 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!