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

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

VUE を書くときは、scss を使って、使いやすいように共通スタイルをいくつか作ります。共通スタイルを書くときは、毎回 1 つのファイルをインポートする必要があります。書き始めたときは大丈夫な気がしますが、作業量が多くなると面倒になります。そこで、この記事では scss スタイルをグローバルにインポートします。

1. ミックスイン.scss

// 色定義の指定 $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: 列;

}

このファイルはグローバルにカプセル化されたscssです

2. 単一ファイルの使用

3. グローバルマウント

3.1 依存関係のインポート

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

設定を追加します:

vue.config.jsファイルに次のコードを追加します。

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

  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'

          })

          。終わり()

    })

  }

}

チェーンWebpackチャンク

3.2 プロジェクトを再開する

これで、vue の scss (mixin) のグローバル導入に関するこの記事は終了です。vue の scss のグローバル導入に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue2.x で SCSS をインストールして使用するプロセス全体
  • Vue+scssの昼夜モード切り替え機能を実装する方法
  • Vue で SCSS グローバル変数を設定する手順
  • Vueスコープのscssが無効である問題を解決する
  • vue2でscssを設定する手順
  • Vue で SCSS 構文を使用する方法をご存知ですか?

<<:  MySQL 8.0ドライバとAlibaba Druidバージョン間の互換性の問題を解決

>>:  HTML要素を非表示にするいくつかの方法

推薦する

Vue+elementを使用してページ上部のタグを実装する方法の詳細な説明

目次1. ページレンダリング2. タグを切り替える3. タグを削除するこのようなタグはどのように記述...

ECMAScriptにおけるプリミティブ値と参照値の詳しい説明

目次序文動的プロパティとは何ですか?値のコピー値の種類を決定する要約する序文これは JavaScri...

Docker がデータベースのデプロイに適さない 7 つの理由のまとめ

Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソフト...

小さなページングデザイン

ユーザーが目的のものを探すために前進するか後退するかを選択できるようにします。たとえば、Taobao...

Linux seqコマンドの使い方

1. コマンドの紹介seq (シーケンス) コマンドは、指定されたステップ サイズに従って、開始番号...

ウェブ理論: 考えさせない読書ノート

第 1 章<br /> Web ページをユーザーにとって使いやすいものにするための最も重...

クリーンなXHTML構文

XHTML を書くには、明確な HTML 構文が必要です。 XHTMLを書くには、きれいなHTML構...

mysql 3つのテーブルを接続してビューを作成する

3 つのテーブルが接続されています。テーブル A のフィールド a はテーブル B のフィールド b...

Linux でファイルの作成時間を取得する方法と実践的なチュートリアル

背景ファイルの作成時刻を取得する必要がある場合があります。例えば: 「xtrabackup スキーマ...

Vue ページに img 画像を導入する方法

HTMLを学ぶとき、画像タグ<img>は画像を導入します <img src=&qu...

CSS を使用して ul と li の水平配置を実現する 2 つの方法

li はブロックレベル要素であり、デフォルトで 1 行を占めるため、水平方向の配置を実現する場合は、...

自動的にフォーカスを取得する要素入力ボックスの実装

最近のプロジェクトでフォームを作成するときに、コメント ボックスまで自動的にスクロールし、コメント ...

win2008 サーバー セキュリティ設定の展開ドキュメント (推奨)

私は新年を迎える前からプロジェクトに取り組んでいましたが、ここ数日で、新しいサーバー用に新しく増設し...

数十億のデータに対するMySQLページングの最適化に関する簡単な説明

目次背景分析するデータシミュレーション1. 従業員テーブルと部門テーブルの2つのテーブルを作成します...

MySQLクエリ速度が遅く、パフォーマンスが低下する原因と解決策

1. データベースクエリの速度に影響を与えるものは何ですか? 1.1 データベースクエリ速度に影響を...