Vue 프로젝트에서 Sass 구성을 사용하는 방법

이번에는 vue 프로젝트에서 sass 구성을 사용하는 방법을 보여드리겠습니다. vue 프로젝트에서 sass 구성을 사용할 때 주의 사항은 무엇입니까?

1. webpack 템플릿을 기반으로 새 프로젝트를 만듭니다

$ vue init webpack myvue

2. 현재 디렉터리에서 installdependents

$ 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></style>

에서 스타일 태그를 수정하세요. 6. 그런 다음 프로젝트를 실행하세요

$ npm run dev

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

storejs 데이터 수집 처리를 위한 Vue 세부 단계

Vim을 다시 시작하지 않고 .vimrc를 다시 로드하는 방법은 무엇입니까

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