vuecli4.0の公共SCSSスタイルの設定ファイル

これは、SASS-リソースローダツールによって実装される必要があります

NPMインストールSASS-リソースローダ

あなたのcssディレクトリに新しいファイルを作成し、変数やメソッドを宣言しSCSS

$色：赤;

次にプロジェクト、新しいvue.config.jsファイルのルートディレクトリに、次のように入力します

// vue.config.js 
module.exportsは= { 
    chainWebpack：設定 => { 
        CONST oneOfsMap = config.module.rule（ 'SCSS' ）.oneOfs.store 
        oneOfsMap.forEach（項目 => { 
            アイテム
                .USE（「sass-リソース・ローダ' ）
                （.loader 'SASS-リソースローダ' ）
                .OPTIONS（{ 
                    // 要公用的SCSS的路径 
                    リソース' ./src/assets/css/reset.scss' 
                }）
                .END（）
        } ）
    } 
}

続い.vueコンポーネントファイルは、それが直接使用することができます

< スタイルLANG = "SCSS" スコープ> 
    .home { 
        色：$色。
    } 
</ スタイル>