VUE-cliの3、スタイラスでは、SASSスタイルは、グローバル変数を共有し、着信します

時には開発では、我々は、次のような基本的なスタイル変数の数を定義しています：

これらの変数を使用します単一ファイルアセンブリのVueの大多数は、各コンポーネントは一度あまりにも面倒を導入しました。グローバル導入は、その後、中main.jsでvariable.stylファイルの導入良い方法ですが、あなたはそれが動作しないでしょう。

VUEのCLI公式文書の発見を確認した後、公式サポートの方法があります。

• 1、入ってくる共有グローバル変数にSASSスタイル

時には、あなたはのプリプロセッサローダのWebPACKにオプションを渡したいです。あなたは使用することができます   オプションを選択します。たとえば、すべてのサススタイルを共有するには、このグローバル変数を渡すことができます。vue.config.jscss.loaderOptions

Vue.config.js // 
module.exportsは= { 
  CSS：{ 
    loaderOptions：{ 
      //ローダー・パス・オプションサスへの
      サスは：{ 
        エイリアス@ / srcに/であり
        、それはあなたが// `のsrc /変数を持っていることを想定しています。このドキュメントscss`の
        データ： `@import "~@/variables.scss";` 
      } 
    } 
  } 
}

　　2、スタイルのスタイラスへの着信共有グローバル変数

// vue.config.jsファイル

= {module.exportsは
  ：{CSS 
    loaderOptions：{ 
      //配信オプションスタイラス・ローダーに
      スタイラス：{ 
        インポート： '~@/common/stylus/color.styl' 
      } 
    } 
  } 
}