Nuxt.JS에서 style-resources-module을 사용하는 방법은 무엇입니까?

5243 단어 nuxtwebdevjavascript
모든 프론트 엔드 개발자는 SCSS, Less 또는 Stylus 변수, 믹스인 및 기능을 모든 곳에서 가져오는 데 지쳤습니다. Nuxt.JS를 사용하는 경우 이를 위한 쉬운 솔루션이 있습니다. style-resources-module을 사용하면 어디에서나 변수를 사용할 수 있습니다. @import 모든 구성 요소를 작성할 필요는 없습니다. 하는 방법은 매우 간단합니다. 저와 함께 하세요!

설치



CSS 전처리기를 설치하지 않은 경우 CSS 전처리기 종속성을 추가하십시오.
  • SASS: yarn add sass-loader node-sass
  • 적게: yarn add less-loader less
  • 스타일러스: yarn add stylus-loader stylus

  • style-resources-module 패키지를 추가합니다.yarn add @nuxtjs/style-resources
    @nuxtjs/style-resources 패키지를 프로젝트에 빌드 모듈로 추가합니다.

    export default {
      buildModules: [
        '@nuxtjs/style-resources',
      ],
    
      styleResources: {
       // your settings here
       sass: [],
       scss: [],
       less: [],
       stylus: []
      }
    }
    


    용법



    SCSS를 예로 들어 설명하겠습니다. 그러나 Less, Sass 또는 Stylus와 같은 다른 프로세서를 자유롭게 사용할 수 있습니다. 다음 예제와 같이 nuxt.config.js 파일에 믹스인 또는 초록을 추가해야 합니다.

    // nuxt.config.js
    
    export default {
      buildModules: ['@nuxtjs/style-resources'],
      styleResources: {
        scss: [
          './assets/vars/*.scss',
          './assets/abstracts/_mixin.scss'
          ]
      }
    }
    



    // assets/vars/colors.scss
    
    $primary: #5eb8ee;
    $secondary: #06af13;
    



    // assets/abstracts/_mixin.scss
    
    @mixin bp($point) {
      @if $point == mobile {
        @media (max-width: 576px) {
          @content;
        }
      }
    }
    


    완료한 후에는 모든 구성 요소에서 믹스인 및 변수를 사용할 수 있습니다.
    components/Box.vue
    <template>
     <div class="box"></div>
    </template>
    
    <style lang="scss" scoped>
    .box {
     color: $secondary;
     @include bp(mobile) {
      background: $primary;
     }
    }
    </style>
    


    참고: 실제 스타일을 가져오지 마십시오. 이 모듈은 실제 빌드에 존재하지 않을 변수, 믹스인, 함수(등)를 가져올 때만 사용하십시오. 실제 스타일을 가져오면 모든 구성 요소에 포함되고 빌드/HMR 크기가 느려집니다. 이러지 마!

    Github: style-resources-module

    그게 다야 읽어 주셔서 감사합니다.

    좋은 웹페이지 즐겨찾기