Sass を使用して Vue 3 + Vite プロジェクトでスタイルの記述とグローバル抽出を実装する

はじめに:
Vue 3 + Vite プロジェクトでは、Sass プリプロセッサを使用すると、スタイル作成の効率と保守性が大幅に向上します。このブログでは、Sass 構文を使用して Vue 3 + Vite プロジェクトにスタイルを記述する方法と、Sass スタイルをグローバルな世界に抽出する方法を紹介します。

サスとは
Vue 3 + Vite プロジェクトで Sass を構成する
Sass 構文の基本
Vue コンポーネントでの Sass スタイルの使用
Sass スタイルをグローバルに抽出する
グローバル Sass コードに関する一般的なヒント

文章：

Sass とは
Sass (Syntactical Awesome Style Sheets) は、CSS の機能を拡張し、より多くのスタイル記述ツールと構文を提供する成熟した CSS プリプロセッサです。Sass を使用すると、開発者はネストされたルール、変数、ミキサー、その他の関数を使用して、より簡潔で保守しやすいスタイルのコードを作成できます。
Vue 3 + Vite プロジェクトで Sass を設定する
Vue 3 + Vite プロジェクトで Sass を使用するのは非常に簡単です。まず、関連する依存関係がインストールされていることを確認してください。次のコマンドでインストールできます。

npm install -D sass
npm install -D sass-loader

インストールが完了したら、プロジェクトのルートディレクトリで vite.config.js ファイルを見つけ、次の構成を追加します。

import {
    
     defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    
    
  plugins: [vue()],
  css: {
    
    
    preprocessorOptions: {
    
    
      scss: {
    
    
        additionalData: `@import "./src/styles/variables.scss";`
      }
    }
  }
})

上記の設定では、css.preprocessorOptions.scss.AdditionalData を通じてグローバル Sass ファイルを導入し、このファイルでいくつかのグローバル変数とミキサーを定義できます。

Sass 構文の基本
Sass には多くの強力な構文機能が用意されており、一般的に使用されるもののいくつかを以下に示します。

ネストルール: あるセレクターを別のセレクター内にネストして、コードの重複を減らすことができます。

.container {
  width: 100%;
  
  .title {
    font-size: 20px;
  }
}

変数: 変数を定義して使用すると、スタイル内の値の再利用が容易になります。

$primary-color: #007bff;

.button {
  background-color: $primary-color;
}

ミキサー: 関数と同様に、再利用可能なスタイルコードを定義できます。

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
}

Vue コンポーネントで Sass スタイルを使用する
Vue コンポーネントで Sass スタイルを使用するのは非常に簡単で、スタイルファイルを追加するだけです。

拡張子をからまたはに.css変更するだけです。Vue 単一ファイルコンポーネントのタグで、lang 属性を使用して使用する言語を指定します。.scss.sass<style>

<template>
  <div class="container">
    <h1 class="title">Hello, Vue 3 + Vite + Sass!</h1>
  </div>
</template>

<style lang="scss">
.container {
  width: 100%;

  .title {
    font-size: 20px;
  }
}
</style>

Sass スタイルをグローバルに抽出する
複数のコンポーネント間でスタイルコードを共有するために、Sass スタイルをグローバルに抽出できます。上記の vite.config.js 構成ファイルでは、グローバル Sass ファイル (例: ) を導入しましたvariables.scss。このファイルでは、いくつかのグローバルスタイル変数とミキサーを定義できます。

// variables.scss
$primary-color: #007bff;
$secondary-color: #6c757d;
$font-size: 16px;

// mixins.scss
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

次に、これらのグローバルスタイルを使用する必要があるコンポーネントでは、@import導入するグローバルスタイルファイルを使用するだけです。

<template>
  <div class="container">
    <h1 class="title">Hello, Vue 3 + Vite + Sass!</h1>
    <button class="button">Click me</button>
  </div>
</template>

<style lang="scss">
@import "./styles/variables.scss";
@import "./styles/mixins.scss";

.container {
  width: 100%;

  .title {
    font-size: $font-size;
  }

  .button {
    @include flex-center;
    background-color: $primary-color;
    color: $secondary-color;
    font-size: $font-size;
  }
}
</style>

グローバル Sass コードに関する一般的なヒント

プロジェクト全体で一貫して使用できるように、色、フォントサイズなどのグローバルスタイル変数を定義します。
複数のコンポーネントで再利用できるように、レイアウト、アニメーションなどのいくつかの一般的なスタイルミキサーを定義します。
ネストされたルールを使用して重複コードを減らし、スタイルの可読性と保守性を向上させます。
Sass の関数と演算子を使用してスタイルを計算し、スタイルを動的に生成します。

結論:
Vue 3 + Vite プロジェクトで Sass を使用すると、開発者がスタイルコードをより効率的に作成および保守できるようになります。このブログでは、Vue プロジェクトで Sass を構成する方法と、Sass 構文の基本的な使用法を紹介します。同時に、Sass スタイルをグローバルに抽出して使用する方法と、グローバル Sass コードの一般的なテクニックも提供します。このコンテンツが Vue 3 + Vite プロジェクトで Sass を使用するのに役立つことを願っています。

Sass を使用して Vue 3 + Vite プロジェクトでスタイルの記述とグローバル抽出を実装する

おすすめ