Vue 프로젝트에서 sass를 사용하는 구성 방법

亚连
풀어 주다: 2018-05-25 16:44:40
원래의
1708명이 탐색했습니다.

이 글은 주로 vue 프로젝트에서 sass를 사용하는 구성 방법을 소개합니다. 필요하신 분들은 참고하시면 됩니다

1. webpack 템플릿을 기반으로 새 프로젝트를 생성합니다

$ vue init webpack myvue
로그인 후 복사

2.

$ cd myvue
$ npm install
로그인 후 복사

3. sass

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
로그인 후 복사

4의 종속성 패키지를 설치합니다. 빌드 폴더

{
 test: /\.sass$/,
 loaders: ['style', 'css', 'scss']
}
로그인 후 복사

의 webpack.base.conf.js 규칙에 구성을 추가합니다. 아래 그림과 같이

5. APP.vue에서 스타일 태그를 수정합니다

<style lang="scss">
로그인 후 복사

6. 그런 다음 프로젝트를 실행합니다

$ npm run dev
로그인 후 복사

7. APP.vue의 스타일을 수정하면 효과를 볼 수 있습니다

8. 회색은 sass를 성공적으로 구성했음을 나타냅니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련글 :

Ajax 스마트 프롬프트 검색 기능 구현

Reverse Ajax 빠르게 30분 마스터

Ajax 글로벌 로딩 박스 구성 (로딩 효과)

위 내용은 Vue 프로젝트에서 sass를 사용하는 구성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!