vue-cli 3.0 에서 사전 프로세서(Sass/Less/Stylus)를 사용 하여 전역 변 수 를 설정 합 니 다.
2327 단어 vue-cli3.0프로세서배치 하 다.전역 변수
# Sass
npm install -D sass-loader node-sass
# Less
npm install -D less-loader less
# Stylus
npm install -D stylus-loader stylus
그리고 해당 파일 형식 을 가 져 오 거나*.vue 파일 에서 이렇게 사용 할 수 있 습 니 다.
<style scoped lang="stylus">
.personal
position relative
.banner-red
width 100%
height 100px
</style>
자동 으로 파일 가 져 오기(색상,변수,mixin...)를 원한 다 면 style-resources-loader 를 사용 할 수 있 습 니 다.vue add style-resources-loader
그리고 그것 은 당신 이 사용 하 는 예비 처리 장 치 를 선택 하 게 할 것 입 니 다.
설치 가 완료 되면 사용 할 예비 프로 세 서 를 선택 하 십시오.vue.config.js 코드 에서 생 성 됩 니 다.
그리고 프로젝트 를 다시 시작 합 니 다.
npm run serve
더 자세 한 것 은 읽 어 주세요.
추가 지식:vue-cli 3 구축 프로젝트 중 vue 구성 요소 에 stylus 파일 타 임 스 오류 해결 방법 도입
오보 표현
해결 방법:
파일 을 가 져 올 때 경로 앞 에 추가~
예:
@import '~common/stylus/mixin.styl';
vue.config.js 설정 파일 의 alias 설정
chainWebpack: config => {
config.resolve.alias
.set('vue$', 'vue/dist/vue.esm.js')
.set('@',resolve('src'))
.set('@assets',resolve('src/assets'))
.set('components', resolve('src/components'))
.set('common',resolve('src/common'))
.set('base',resolve('src/base'))
.set('api',resolve('src/api')),
config.resolve.symlinks(true)
}
설명:왜 늘 려 야 하 는 지..~common 대 표 는 common 디 렉 터 리 에 비해 웹 팩 에 alias 를 설정 하여 common 이 가리 키 는 디 렉 터 리 를 간략하게 씁 니 다.
이 편 은 vue-cli 3.0 에서 프 리 프로세서(Sass/Less/Stylus)를 사용 하여 전역 변 수 를 설정 하 는 것 이 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
vue-cli 3.0 에서 사전 프로세서(Sass/Less/Stylus)를 사용 하여 전역 변 수 를 설정 합 니 다.프로젝트 를 만 들 때 예비 프로세서(Sass/Less/Stylus)를 선택 할 수 있 습 니 다.만약 당시 에 선택 하지 않 았 다 면,내 장 된 웹 팩 은 모든 처 리 를 완성 할 수 있 도록 미리 설 정 될 것...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.