vue-cli 3.0 에서 사전 프로세서(Sass/Less/Stylus)를 사용 하여 전역 변 수 를 설정 합 니 다.

프로젝트 를 만 들 때 예비 프로세서(Sass/Less/Stylus)를 선택 할 수 있 습 니 다.만약 당시 에 선택 하지 않 았 다 면,내 장 된 웹 팩 은 모든 처 리 를 완성 할 수 있 도록 미리 설 정 될 것 입 니 다.웹 팩 loader 를 수 동 으로 설치 할 수 있 습 니 다:

# 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)를 사용 하여 전역 변 수 를 설정 하 는 것 이 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.