VUEプロジェクトにVUE-CLI 3.0統合SASS / SCSS

プロジェクトを作成するには、no CSSプリプロセッサた場合、我々はまた、SASS-ローダーノード-SASS手動で統合SCSSをインストールすることができます。

NPMインストール-D SASS-ローダーノード-SASS

アセンブリに取り付けるときに使用することができるscssの。

<スタイルのlang = "SCSS"スコープ> 
.wrap { 
    H1 { 
        色：青。
    } 
} 
</スタイル>

グローバル変数は、SCSSを導入しました

_variable.scss

$カラーテーマ：＃498eff。

あなたが使用したい場合はscss、変数を、設定ファイルに以下の変更を加える必要があり

VUEサービスCLIEは、自動的に私たちは、ローダSCSSコンテンツとしてインストールSASS-ローダーを使用します。VUE CLIはWebPACKのあなたはSASS-ローダーにいくつかの設定項目を渡したい場合は、あなたがvue.config.jsを構成することができ、プロジェクトをビルド基づいています。手動で、vue.config.jsを見つけていない場合は作成するプロジェクトのルートディレクトリに。次のとおりです。

// vue.config.js 
CONST FS =必要とする（ 'FS' ）
module.exportsは = { 
  CSS：{ 
    loaderOptions：{ 
      SASS：{ 
            prependData： `@import "~@/assets/scss/_variable.scss" ;` 
            } 
         } 
      } 
}

また、輸入を通じて.vueでアセンブリに導入されるこのファイルvariables.scss。

完成構成ファイルを変更することは、あなたが使用することができ、次のプロジェクトを再起動することを忘れないscss変数、関数、およびその機能を。

<スタイルはLANG = "SCSSを"スコープ> 
.wrap { 
    H1 { 
        色：$カラーテーマ。
    } 
} 
</スタイル>