Vue が scss (mixin) をグローバルに導入

// 色定義の指定 $color-background : #FFFFFF;

背景色をrgba(0, 0, 0, 0.3);

$color-highlight-background : #333;

$color-ダイアログの背景: #666;

$color-theme : #ffcd32;

$color-theme-d : rgba(255, 205, 49, 0.5);

$colorサブテーマ: #d93f30;

カラーテキストの色はrgba(255, 255, 255, 0.3);

$color-text-l : rgba(255, 255, 255, 0.5);

$color-text-ll : rgba(255, 255, 255, 0.8);



$フォントグレー: #999;

//フォント定義仕様 $font-size-small-s : 10px;

$font-size-small : 12px;

$font-size-medium : 14px;

$font-size-medium-x : 16px;

$font-size-large: 18px;

$font-size-large-x : 22px;



フォントの太さ: 600;
本文、html{

  //背景: rgb(239, 242, 249);

}

//背景画像 100%

@mixin bkgMaxSize($url) {

 

  背景画像: url($url);

  背景繰り返し: 繰り返しなし;

  背景サイズ: 100% 100%;

}

@mixin フォント設定グループ($font-size、$font-family、$font-weight、$color、$line-height){


  フォントサイズ: $font-size;

  フォントファミリ: $font-family;

  フォントの太さ: $font-weight;

  色: $color;

  行の高さ: $line-height;

}

// 境界線の半径 @mixin borderRadius($radius) {

 

  -webkit-border-radius: $radius;

  半径: $radius;

  -ms-border-radius: $radius;

  -o-境界半径: $半径;

  境界線の半径: $radius;

}

//中央に上下左右に配置する @mixin positionCenter {

   位置: 絶対;

  上位: 50%;

  左: 50%;

  変換: translate(-50%, -50%);

}

// 上下中央に配置する @mixin ct {

  位置: 絶対;

  上位: 50%;

  変換: translateY(-50%);

}

// 左と右の中央を配置 @mixin cl {

  位置: 絶対;

  左: 50%;

  変換: translateX(-50%);

}

// フルスクリーンの配置 @mixin allcover {
 位置: 絶対;

  上: 0;

  右: 0;

}

//相対的な位置指定 @mixin my-absolute($left, $top,$z) {


  位置: 絶対;

  Zインデックス: $z;

  左マージン: $left;

  上マージン: $top;

}

//幅と高さが異なる @mixin widthHeightN($width, $height){


  幅: $width;

  高さ: $height;

}

//幅と高さは同じ @mixin widthHeightY($number){

 

  幅: $number;

  高さ: $number;

}

//フォントサイズ、色 @mixin sizeColor($size, $color){

 

  フォントサイズ: $size;

  色: $color;

}

//フレックスレイアウト @mixin center_none{

 

  ディスプレイ: フレックス;

  コンテンツの中央揃え: 中央;

  アイテムの位置を中央揃えにします。

}

@mixin センター_センター{

  ディスプレイ: フレックス;

  コンテンツの中央揃え: 中央;

  アイテムの位置を中央揃えにします。

}

@mixin flex-start_center{

  ディスプレイ: フレックス;

  コンテンツの配置: flex-start;

  アイテムの位置を中央揃えにします。

}

@mixin スペース間の中央{

  ディスプレイ: フレックス;

  コンテンツの両端揃え: スペースの間;

  アイテムの位置を中央揃えにします。

}

@mixin スペースアラウンド_センター{

 

  ディスプレイ: フレックス;

  コンテンツの両端揃え: スペースを空ける;

  アイテムの位置を中央揃えにします。

}

@mixin flex-end_center{

  ディスプレイ: フレックス;

  コンテンツの端揃え: flex-end;

  アイテムの位置を中央揃えにします。

}
@mixin wrap_flex-start{

 

  ディスプレイ: フレックス;

  flex-wrap:ラップ;

  align-content:flex-start;

}

@mixin flex-start_column{

  ディスプレイ: フレックス;

  コンテンツの配置: flex-start;

  flex-direction: 列;

}

@mixin none_center_column{

 

  ディスプレイ: フレックス;

  アイテムの位置を中央揃えにします。

  flex-direction: 列;

}

@mixin センターセンター列{

  ディスプレイ: フレックス;

  アイテムの位置を中央揃えにします。

  コンテンツの配置: flex-start;

  flex-direction: 列;

}

npm で sass-resources-loader をインストールします

モジュール.エクスポート = {

  outputDir: 'mbb',/*出力ディレクトリ*/

  publicPath: '/',/*アクセスプレフィックス*/

  lintOnSave: false, // Eslint検出をオフにする chainWebpack: config => {

    定数 oneOfsMap = config.module.rule('scss').oneOfs.store

    oneOfsMap.forEach(アイテム => {

      アイテム

          .use('sass-resources-loader')

          .loader('sass-resources-loader')

          .オプション({

            // リソースを含むファイルへのパスを指定します

            // 共有リソースとなる SCSS のパス: 'src/assets/stylus/mixin.scss'

          })

          。終わり（）

    })

  }

}