Nuxtでスタイル資源モジュールを使う方法.JS ?

私は、すべてのフロントエンドの開発者はSCSS、以下のまたはスタイラス変数、ミックスと機能をインポートするのに疲れていることを確認します.あなたがNuxtを使っているならば.JSは、そのための簡単なソリューションです.スタイルリソースモジュールを使用すると、どこでも変数を使用できます.すべてのコンポーネントをインポートする必要はありません.それを行うには非常に簡単です、ちょうど私とスティック!

インストール
CSSプリプロセッサをインストールしていない場合は、CSSプリプロセッサ依存を追加します.

のSass:yarn add sass-loader node-sass

以下

スタイラス:yarn add less-loader less

スタイルリソースモジュールパッケージを追加します.yarn add stylus-loader stylus@ nuxtjs/styleリソースパッケージをプロジェクトにビルドモジュールとして追加します.

export default {
  buildModules: [
    '@nuxtjs/style-resources',
  ],

  styleResources: {
   // your settings here
   sass: [],
   scss: [],
   less: [],
   stylus: []
  }
}

用途
私はSCSSで例をあげます.しかし、あなたは以下のような他のプロセッサを使用して自由に、sassやスタイラスです.あなたのNuxtにミックスや要約を追加する必要があります.設定.以下の例のような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;
    }
  }
}

完了したら、任意のコンポーネントでミックスと変数を使用することができます.yarn add @nuxtjs/style-resources

<template>
 <div class="box"></div>
</template>

<style lang="scss" scoped>
.box {
 color: $secondary;
 @include bp(mobile) {
  background: $primary;
 }
}
</style>

注:実際のスタイルをインポートしないでください.このモジュールを使用して、変数、mixins、関数(et cetera)をインポートします.実際のスタイルをインポートするすべてのコンポーネントでそれらを含めると、ビルド/hmrの大きさが遅くなる.これをしないでください!
ギタブ:style-resources-module
それです.読書ありがとう.