nuxt 프로젝트 설정less,sass,stylus 프로세서에 대한 지원

nuxt 설정less,sass,stylus 지원
독서 안내
프로젝트 개발 과정에서 프로젝트 스타일을 작성할 때 많은 어린이 신발들이 css 프로세서를 사용하여 편리하고 빠른 개발을 즐긴다. 그래서 우리 프로젝트가 프로세서를 지원하는 것은 매우 필요하다.
이 장에서 우리 프로젝트는 stylus,less,sass 이 세 가지 비교적 자주 사용하는 css 프로세서 도구에 대한 지원을 추가했다.
우리는 홈페이지에 가서 문서를 볼 수 있다.https://zh.nuxtjs.org/api/configuration-build/#styleresources

우선 설치가 필요합니다style-resources:

    cnpm install --save-dev @nuxtjs/style-resources

필요한 경우 다음과 같이 설치합니다.

sass: cnpm install --save-dev sass-loader node-sass

less: cnpm install --save-dev less-loader less

stylus: cnpm install --save-dev stylus-loader stylus

다음에 우리는 nuxt.config.js의 설정을 수정해야 한다. 다음과 같다.

export default {
  modules: [
    '@nuxtjs/style-resources',
  ],
  styleResources: {
    scss: './assets/variables.scss',
    less: './assets/**/*.less',
    // sass: ...         ，      
  }
}

stylus

다음에 우리는 테스트 단계에 들어갔다. 우리는 index.vue의 양식을 다음과 같이 수정했다.

<style scoped lang="stylus">
  wh($w = 100%, $h = 100%){
    width:$w; height:$h;background-color:red;
  }
  .content-page {
    margin: 0;
    wh()
  }
  .index-title{
    height: 80px; line-height: 80px;
  }
  .card-info{
    width: 92%; margin: 0 auto; margin-bottom: 30px;
  }
  .spinner-box{
  display: block; margin: 0 auto; margin-top: 50px;
  }
style>

우리는 서비스를 다시 시작하고 브라우저를 열어 양식이 효력이 발생하는지 관찰한다. 자, 여기서는 우리의 프로젝트 배경이 이미 빨간색으로 변한 것을 보았기 때문에 우리의 프로세서가 이미 설정되었다.
다음은 전역 함수 styl 파일을 설정해야 합니다.
(1) 가장 간단하고 직접적인 방법은 바로 도입하는 것이다.

<style scoped lang="stylus">

  @import "~assets/common.styl"

  .content-page {
    margin: 0;
    wh()
  }
  .index-title{
    height: 80px; line-height: 80px;
  }
  .card-info{
    width: 92%; margin: 0 auto; margin-bottom: 30px;
  }
  .spinner-box{
  display: block; margin: 0 auto; margin-top: 50px;
  }
style>

비고: 만약에 여러 개의 파일이 이런 파일을 동시에 사용할 때 매번 이렇게 도입해야 하는 것은 상당히 번거로운 일이다.그래서 우리는 더욱 빠르고 간단한 방식이 필요하다.
(2) 우리는 아래의 wh() 방법을 하나의 공공assets/common.styl에 봉했다. 그리고 우리는 nuxt.config.js에 다음과 같이 추가했다.

styleResources: {
    stylus: '~/assets/common.styl',
    // sass: ...
},

저장한 후에 서비스를 다시 시작하면 양식이 여전히 작용할 수 있음을 알 수 있습니다.그래서 전역적으로 공통된 스타일시트는 이렇게 설정할 수 있다.
less
여기서는 less의 효력 여부를 다시 한 번 테스트해 보겠습니다. 편집은 다음과 같습니다.

<style scoped lang="less">

  @color:pink;
  .bg{
    width:100%;height:100%;background-color: @color;
  }

  .content-page {
    margin: 0;
    .bg;
  }
  .index-title{
    height: 80px; line-height: 80px;
  }
  .card-info{
    width: 92%; margin: 0 auto; margin-bottom: 30px;
  }
  .spinner-box{
  display: block; margin: 0 auto; margin-top: 50px;
  }
style>

다음은 공용 파일을 테스트하는 것입니다. assets/common.less에 다음과 같이 추가되었습니다.

@color:purple;
.bg{
    width:100%;height:100%;background-color: @color;
}

구성 요소 내부의less 정의를 삭제하고 이 배경이 보라색으로 변했는지 관찰합니다. 서비스를 다시 시작하면 이 배경이 보라색으로 변하는 것을 발견할 수 있습니다. 이것은 우리의less 파일이 전체적으로 도입되었음을 의미합니다.
sass
다음 테스트sass를 수행하여 다음과 같이 편집합니다.

<style scoped lang="scss">

  $color:yellow;
  @mixin block{
    width:100%;height:100;background-color:$color;
  }

  .content-page {
    margin: 0;
    @include block;
  }
  .index-title{
    height: 80px; line-height: 80px;
  }
  .card-info{
    width: 92%; margin: 0 auto; margin-bottom: 30px;
  }
  .spinner-box{
  display: block; margin: 0 auto; margin-top: 50px;
  }
style>

여기서는 전체적으로 도입된 두 가지 방식을 더 이상 테스트하지 않겠습니다. 관심 있는 구두들은 많이 시도해 보세요.자, 우리 이 장의 내용은nuxt 프로젝트에 3가지 css예처리기를 배치하여 이미 완성했습니다. 다음 시간에 우리는 우리의nuxt 실전 개발 과정에 대해 하나의 과정 소절을 만들고 우리 프로젝트 개발의 절차를 분석할 것입니다. 프로젝트 개발 과정에서 어떤 지식을 배웠는지 포함합니다.