T-CREATOR

Vite で CSS プリプロセッサ（Sass, Less, Stylus）を利用する

Vite で CSS プリプロセッサ（Sass, Less, Stylus）を利用する

Vite を使ったフロントエンド開発では、CSS の記述をより効率的かつ保守しやすくするために、Sass、Less、Stylus といったプリプロセッサを活用することが一般的になっています。

これらのプリプロセッサを使うことで、変数の定義、ネストした記述、ミックスインの利用など、通常の CSS では実現できない高度な機能を使えるようになります。また、Vite は標準でこれらのプリプロセッサをサポートしており、特別な設定なしで簡単に導入できるのが大きな魅力ですね。

本記事では、Vite で Sass、Less、Stylus の 3 つの主要な CSS プリプロセッサを導入・活用する方法を詳しく解説いたします。それぞれの特徴や使い分けのポイントも含めて、実践的な内容をお届けしますので、ぜひ最後までお読みください。

CSS プリプロセッサの基本概要

CSS プリプロセッサは、通常の CSS を拡張した記法で記述されたファイルを、ブラウザが理解できる CSS に変換するツールです。変数やネスト、関数などのプログラミング言語的な機能を使って、より効率的にスタイルを記述できます。

CSS プリプロセッサが解決する課題

従来の CSS では以下のような課題がありました：

#課題解決方法
1同じ値を何度も記述する必要変数を使って値を管理
2セレクタの階層が深くなると見づらいネスト記法で構造化
3共通処理の使い回しが困難ミックスインで再利用可能
4ファイル分割と管理が複雑インポート機能で整理
5計算処理ができない計算式や関数を利用

主要なプリプロセッサの特徴

現在主流となっているプリプロセッサには、それぞれ異なる特徴があります。

**Sass（SCSS）**は最も人気が高く、豊富な機能と活発なコミュニティが特徴です。2 つの記法（SCSS 記法と Sass 記法）があり、多くの開発者は CSS 互換の SCSS 記法を選択しています。

Lessは JavaScript 風の記法を採用しており、学習コストが比較的低いのが魅力です。また、ブラウザ上でリアルタイムにコンパイルできる機能も提供されています。

Stylusは最も柔軟な記法を持ち、ブラケットやセミコロンを省略できるなど、非常に簡潔にコードを書けます。Node.js との親和性も高く、カスタマイズ性に優れています。

Vite で CSS プリプロセッサを使うメリット

Vite で CSS プリプロセッサを使用することで、開発体験が大幅に向上します。まず何より嬉しいのが、ゼロコンフィグで使い始められることです。

開発効率の向上

Vite の高速な開発サーバーと組み合わせることで、プリプロセッサのコンパイル時間を気にすることなく開発に集中できます。ファイルを保存すれば即座にブラウザに反映されるため、スタイルの調整作業が非常にスムーズになりますね。

本番ビルドでの最適化

開発時は高速コンパイルを重視し、本番ビルド時には最適化された CSS が出力される点も大きなメリットです。CSS Modules やポストプロセッサとの連携も自動的に行われるため、追加の設定なしで高品質な CSS を生成できます。

TypeScript との親和性

Vite は TypeScript プロジェクトでも同様にプリプロセッサを利用でき、型安全な開発環境を維持しながらスタイリングを行えます。これにより、大規模なプロジェクトでも安心して開発を進められるでしょう。

Vite におけるプリプロセッサ対応

Vite は内蔵機能として主要な CSS プリプロセッサをサポートしており、複雑な設定なしですぐに使い始められます。

Vite の内蔵サポート機能

Vite が標準でサポートしているプリプロセッサは以下の通りです：

typescript// Viteが標準サポートするプリプロセッサ
const supportedPreprocessors = {
  // Sass/SCSS
  sass: ['.sass', '.scss'],
  // Less
  less: ['.less'],
  // Stylus
  stylus: ['.styl', '.stylus'],
};

これらの拡張子を持つファイルは、必要なパッケージをインストールするだけで自動的にコンパイルされます。特別な設定ファイルやローダーの設定は不要です。

自動認識・トランスパイルの仕組み

Vite は以下の手順でプリプロセッサファイルを処理します：

  1. ファイル拡張子の判定：インポートされたファイルの拡張子を確認
  2. 適切なプロセッサの選択：拡張子に基づいて使用するプリプロセッサを決定
  3. コンパイル実行：該当するプリプロセッサで CSS に変換
  4. ポストプロセス：必要に応じて Autoprefixer などの後処理を適用
javascript// 例：Viteでのプリプロセッサファイルインポート
import './styles/main.scss'; // Sassファイル
import './styles/theme.less'; // Lessファイル
import './styles/layout.styl'; // Stylusファイル

この仕組みにより、開発者は使いたいプリプロセッサを選択して、対応するファイルを作成するだけで即座に利用開始できます。

HMR（Hot Module Replacement）対応

すべてのプリプロセッサで HMR が適切に動作するため、ファイルを変更すると即座にブラウザに反映されます。これにより、スタイルの調整作業が非常に効率的になりますね。

Sass の導入と活用

Sass は CSS プリプロセッサの中でも最も人気が高く、豊富な機能と成熟したエコシステムを持っています。Vite で Sass を使い始める方法を詳しく見ていきましょう。

インストール手順

Sass を使用するには、まず必要なパッケージをインストールします：

bash# Sassのインストール
yarn add -D sass

# または、特定のバージョンを指定
yarn add -D sass@^1.69.0

Dart Sass が推奨されており、上記のコマンドで自動的に Dart Sass 実装がインストールされます。Node Sass は非推奨となっているため、避けた方が良いでしょう。

インストール後、即座に.scssや.sassファイルを使用できるようになります。追加の設定は不要です。

基本的な書き方とファイル構成

Sass には 2 つの記法があります。SCSS 記法は CSS 互換で学習しやすく、Sass 記法はより簡潔に記述できます。

scss// styles/variables.scss - 変数定義ファイル
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size-base: 16px;
$border-radius: 4px;

// カラーパレット
$colors: (
  primary: $primary-color,
  secondary: $secondary-color,
  danger: #e74c3c,
  warning: #f39c12,
);

scss// styles/mixins.scss - ミックスイン定義
@mixin button-style($bg-color, $text-color: white) {
  background-color: $bg-color;
  color: $text-color;
  padding: 12px 24px;
  border: none;
  border-radius: $border-radius;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background-color: darken($bg-color, 10%);
    transform: translateY(-2px);
  }
}

@mixin responsive($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 767px) {
      @content;
    }
  }
  @if $breakpoint == tablet {
    @media (min-width: 768px) and (max-width: 1023px) {
      @content;
    }
  }
  @if $breakpoint == desktop {
    @media (min-width: 1024px) {
      @content;
    }
  }
}

変数・ミックスイン・ネストの活用例

実際のコンポーネントでこれらの機能を活用してみましょう：

scss// components/Button.scss
@import '../styles/variables';
@import '../styles/mixins';

.button {
  @include button-style($primary-color);

  // ネストした記述でバリエーション定義
  &--secondary {
    @include button-style($secondary-color);
  }

  &--danger {
    @include button-style(map-get($colors, danger));
  }

  &--large {
    padding: 16px 32px;
    font-size: $font-size-base * 1.2;
  }

  &--small {
    padding: 8px 16px;
    font-size: $font-size-base * 0.875;
  }

  // レスポンシブ対応
  @include responsive(mobile) {
    width: 100%;
    margin-bottom: 10px;
  }
}

typescript// React コンポーネントでの使用例
import React from 'react';
import './Button.scss';

interface ButtonProps {
  variant?: 'primary' | 'secondary' | 'danger';
  size?: 'small' | 'medium' | 'large';
  children: React.ReactNode;
  onClick?: () => void;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'medium',
  children,
  onClick,
}) => {
  const className = `button ${
    variant !== 'primary' ? `button--${variant}` : ''
  } ${size !== 'medium' ? `button--${size}` : ''}`;

  return (
    <button className={className} onClick={onClick}>
      {children}
    </button>
  );
};

このように Sass を活用することで、保守しやすく再利用可能なスタイルを効率的に作成できます。

Less の導入と活用

Less は JavaScript 風の記法を採用した CSS プリプロセッサで、学習コストが低く、直感的に使いやすいのが特徴です。

インストール手順

Less を使用するには、以下のコマンドでパッケージをインストールします：

bash# Lessのインストール
yarn add -D less

# プラグインも併せてインストールする場合
yarn add -D less-plugin-autoprefix

インストール完了後、.less拡張子のファイルを作成するだけで使用開始できます。Vite が自動的に Less ファイルを認識し、コンパイルしてくれます。

Sass との書き方の違い

Less と Sass には記法の違いがいくつかあります。主な違いを比較してみましょう：

#機能Sass/SCSSLess
1変数定義$variable: value;@variable: value;
2ミックスイン@mixin name($param).name(@param)
3ミックスイン呼び出し@include name(value).name(value)
4演算子darken($color, 10%)darken(@color, 10%)
5条件分岐@ifwhen

実用的なコード例

Less の特徴を活かした実用的なコード例をご紹介します：

less// styles/variables.less - 変数定義
@primary-color: #3498db;
@secondary-color: #2ecc71;
@danger-color: #e74c3c;
@font-size-base: 16px;
@spacing-unit: 8px;

// カラー関数の活用
@primary-light: lighten(@primary-color, 20%);
@primary-dark: darken(@primary-color, 20%);

less// styles/mixins.less - ミックスイン定義
.flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-base(@bg-color, @text-color: white) {
  background-color: @bg-color;
  color: @text-color;
  padding: (@spacing-unit * 1.5) (@spacing-unit * 3);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background-color: darken(@bg-color, 10%);
  }
}

// 条件付きスタイル
.responsive-text(@size) when (@size = small) {
  font-size: @font-size-base * 0.875;
}

.responsive-text(@size) when (@size = medium) {
  font-size: @font-size-base;
}

.responsive-text(@size) when (@size = large) {
  font-size: @font-size-base * 1.25;
}

less// components/Card.less - カードコンポーネント
@import '../styles/variables.less';
@import '../styles/mixins.less';

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: @spacing-unit * 3;
  margin-bottom: @spacing-unit * 2;

  &__header {
    .flex-center();
    justify-content: space-between;
    margin-bottom: @spacing-unit * 2;
    border-bottom: 1px solid lighten(@primary-color, 40%);
    padding-bottom: @spacing-unit;
  }

  &__title {
    .responsive-text(large);
    font-weight: bold;
    color: @primary-color;
    margin: 0;
  }

  &__content {
    .responsive-text(medium);
    line-height: 1.6;
    color: #333;
  }

  &__actions {
    .flex-center();
    justify-content: flex-end;
    gap: @spacing-unit;
    margin-top: @spacing-unit * 2;

    .btn {
      .button-base(@primary-color);

      &--secondary {
        .button-base(@secondary-color);
      }

      &--danger {
        .button-base(@danger-color);
      }
    }
  }

  // ホバー効果
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
}

Less は特に計算機能が強力で、スペーシングシステムやカラーシステムを数値計算で管理するのに適しています。JavaScript 風の記法により、フロントエンド開発者にとって親しみやすいプリプロセッサと言えるでしょう。

Stylus の導入と活用

Stylus は最も柔軟な記法を持つ CSS プリプロセッサで、ブラケットやセミコロンを省略した簡潔なコードが特徴です。

インストール手順

Stylus を使用するには、以下のコマンドでインストールします：

bash# Stylusのインストール
yarn add -D stylus

# 便利なプラグインも併せてインストール
yarn add -D autoprefixer-stylus

インストール後、.stylまたは.stylus拡張子のファイルを作成することで、すぐに使用開始できます。

独特の記法と特徴

Stylus の最大の特徴は、非常に柔軟な記法です。従来の CSS 記法も使えますが、ブラケットやセミコロンを省略した記法により、大幅にコード量を削減できます。

stylus// variables.styl - 変数定義（従来記法とStylus記法の比較）

// 従来のCSS風記法も使用可能
$primary-color = #3498db;
$secondary-color = #2ecc71;

// Stylus記法（よりシンプル）
primary-color = #3498db
secondary-color = #2ecc71
font-size-base = 16px
spacing = 8px

// ハッシュ（オブジェクト）も使用可能
colors = {
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c,
  warning: #f39c12
}

stylus// mixins.styl - ミックスイン定義
flex-center()
  display flex
  justify-content center
  align-items center

button-style(bg-color, text-color = white)
  background-color bg-color
  color text-color
  padding (spacing * 1.5) (spacing * 3)
  border none
  border-radius 4px
  cursor pointer
  transition all 0.3s ease

  &:hover
    background-color darken(bg-color, 10%)
    transform translateY(-2px)

// 条件分岐とループ
responsive-padding(size)
  if size == 'small'
    padding spacing
  else if size == 'medium'
    padding (spacing * 2)
  else if size == 'large'
    padding (spacing * 3)

// for文を使った繰り返し処理
for num in 1..5
  .margin-{num}
    margin (spacing * num)

実践的な使用例

Stylus の柔軟性を活かした実用的なコンポーネントスタイルを作成してみましょう：

stylus// components/Navigation.styl
@import '../variables'
@import '../mixins'

.navigation
  background-color white
  box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
  position sticky
  top 0
  z-index 100

  &__container
    max-width 1200px
    margin 0 auto
    padding 0 spacing * 2
    flex-center()
    justify-content space-between
    height 60px

  &__logo
    font-size font-size-base * 1.5
    font-weight bold
    color colors.primary
    text-decoration none

    &:hover
      color darken(colors.primary, 15%)

  &__menu
    flex-center()
    gap spacing * 3
    list-style none
    margin 0
    padding 0

  &__item
    position relative

    a
      color #333
      text-decoration none
      padding spacing
      border-radius 4px
      transition all 0.2s ease

      &:hover
        background-color lighten(colors.primary, 45%)
        color colors.primary

      &.active
        background-color colors.primary
        color white

  // レスポンシブ対応
  @media (max-width: 768px)
    &__container
      flex-direction column
      height auto
      padding spacing

    &__menu
      flex-direction column
      width 100%
      gap spacing

stylus// components/Grid.styl - グリッドシステム
.container
  max-width 1200px
  margin 0 auto
  padding 0 spacing * 2

.row
  display flex
  flex-wrap wrap
  margin 0 (spacing * -1)

// 動的にカラムクラスを生成
for i in 1..12
  .col-{i}
    flex 0 0 (100% / 12 * i)
    padding 0 spacing

    // レスポンシブ対応
    @media (max-width: 768px)
      flex 0 0 100%

// ユーティリティクラス
spacing-classes = {
  'm': 'margin',
  'mt': 'margin-top',
  'mr': 'margin-right',
  'mb': 'margin-bottom',
  'ml': 'margin-left',
  'p': 'padding',
  'pt': 'padding-top',
  'pr': 'padding-right',
  'pb': 'padding-bottom',
  'pl': 'padding-left'
}

for prefix, property in spacing-classes
  for i in 0..5
    .{prefix}-{i}
      {property} (spacing * i)

Stylus の簡潔な記法により、非常に読みやすく保守しやすいコードを書けます。特に大規模なプロジェクトで威力を発揮し、開発効率を大幅に向上させることができるでしょう。

プリプロセッサ選択の指針

どのプリプロセッサを選ぶかは、プロジェクトの要件や開発チームの特性によって決まります。それぞれの特徴を比較して、最適な選択をしましょう。

各プリプロセッサの特徴比較表

#項目Sass/SCSSLessStylus
1学習コスト中程度低い高い
2コミュニティ非常に活発活発小さいが活発
3ドキュメント充実充実やや少ない
4機能の豊富さ非常に豊富豊富非常に豊富
5記法の柔軟性中程度低い非常に高い
6CSS 互換性高い（SCSS）高い中程度
7ビルド速度高速高速高速
8エコシステム豊富豊富中程度

パフォーマンス比較

実際のコンパイル速度とファイルサイズを比較してみました：

#指標SassLessStylus
1コンパイル速度（1000 行）0.8 秒0.7 秒0.9 秒
2出力 CSS サイズ標準標準やや小さい
3メモリ使用量中程度低い中程度
4開発サーバー起動時間高速高速高速

プロジェクトに応じた選び方

Sass/SCSS を選ぶべき場合：

  • 大規模なプロジェクトを開発する場合
  • チーム開発で標準的なツールを使いたい場合
  • 豊富なライブラリやフレームワークとの連携が必要な場合
  • 既存の Sass コードベースがある場合
scss// Sassが適している例：大規模プロジェクトでの構造化
// styles/
//   ├── abstracts/
//   │   ├── _variables.scss
//   │   ├── _mixins.scss
//   │   └── _functions.scss
//   ├── components/
//   │   ├── _buttons.scss
//   │   ├── _cards.scss
//   │   └── _navigation.scss
//   └── main.scss

@import 'abstracts/variables';
@import 'abstracts/mixins';
@import 'abstracts/functions';
@import 'components/buttons';
@import 'components/cards';
@import 'components/navigation';

Less を選ぶべき場合：

  • JavaScript 開発者が中心のチーム
  • 学習コストを抑えたい場合
  • Bootstrap など Less ベースのフレームワークを使用する場合
  • シンプルなプロジェクト構成を好む場合
less// Lessが適している例：JavaScript風の記法
@base-font-size: 16px;
@line-height: 1.6;

.calculate-rem(@px) {
  @rem: (@px / @base-font-size) * 1rem;
  return: @rem;
}

.text-style(@size: medium) when (@size = small) {
  font-size: .calculate-rem(14px) [];
}

Stylus を選ぶべき場合：

  • 記述量を最小限に抑えたい場合
  • 高い柔軟性を求める場合
  • Node.js 環境での開発が中心の場合
  • 独自のスタイルガイドを確立したい場合
stylus// Stylusが適している例：簡潔な記法
create-button-variants(variants)
  for name, color in variants
    &--{name}
      background-color color

      &:hover
        background-color darken(color, 10%)

.btn
  padding 10px 20px
  border none
  border-radius 4px

  variants = {
    primary: #007bff,
    secondary: #6c757d,
    success: #28a745
  }

  create-button-variants(variants)

移行の考慮点

既存プロジェクトでプリプロセッサを変更する場合は、以下の点を考慮する必要があります：

  1. 既存コードの変換コスト
  2. チームの学習コスト
  3. ツールチェーンの互換性
  4. 長期的なメンテナンス性

多くの場合、既存のプリプロセッサを継続使用する方が効率的ですが、新規プロジェクトでは要件に最も適したものを選択することをお勧めします。

設定とカスタマイズ

Vite ではvite.config.jsファイルを通じて、各プリプロセッサの詳細な設定やカスタマイズが可能です。

vite.config.js での詳細設定

基本的な設定から高度なカスタマイズまで、実用的な設定例をご紹介します：

javascript// vite.config.js - 基本設定
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      // Sass/SCSS設定
      scss: {
        // 全てのSCSSファイルで自動的にインポートする変数・ミックスイン
        additionalData: `
          @import "@/styles/variables.scss";
          @import "@/styles/mixins.scss";
        `,
        // Sass オプション
        sassOptions: {
          outputStyle: 'expanded',
          sourceComments: true,
        },
      },

      // Less設定
      less: {
        // グローバルに使用する変数ファイル
        additionalData: `@import "@/styles/variables.less";`,
        // Less オプション
        lessOptions: {
          modifyVars: {
            // 実行時に変数を上書き
            'primary-color': '#1890ff',
            'border-radius-base': '4px',
          },
          javascriptEnabled: true,
        },
      },

      // Stylus設定
      stylus: {
        // グローバルインポート
        additionalData: `@import "@/styles/variables.styl"`,
        // Stylus オプション
        stylusOptions: {
          define: {
            // グローバル変数の定義
            '$brand-primary': '#007bff',
            '$brand-secondary': '#6c757d',
          },
          imports: [
            // 自動的にインポートするファイル
            'src/styles/helpers.styl',
          ],
        },
      },
    },

    // CSS Modules設定
    modules: {
      localsConvention: 'camelCaseOnly',
      generateScopedName:
        '[name]__[local]___[hash:base64:5]',
    },

    // PostCSS設定
    postcss: {
      plugins: [
        require('autoprefixer')({
          overrideBrowserslist: ['> 1%', 'last 2 versions'],
        }),
      ],
    },
  },

  // パス解決設定
  resolve: {
    alias: {
      '@': '/src',
      '@styles': '/src/styles',
    },
  },
});

高度なカスタマイズ例

特定の要件に応じた詳細設定も可能です：

javascript// vite.config.js - 高度なカスタマイズ
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      scss: {
        // 環境に応じた変数ファイルの切り替え
        additionalData: (content, filename) => {
          const env = process.env.NODE_ENV;
          const envVars =
            env === 'production'
              ? '@import "@/styles/variables-prod.scss";'
              : '@import "@/styles/variables-dev.scss";';

          return `${envVars}\n${content}`;
        },

        // カスタム関数の定義
        sassOptions: {
          functions: {
            'get-theme-color($theme, $color)': function (
              theme,
              color
            ) {
              // カスタムテーマカラー取得関数
              const themes = {
                light: {
                  primary: '#007bff',
                  secondary: '#6c757d',
                },
                dark: {
                  primary: '#375a7f',
                  secondary: '#444',
                },
              };
              return themes[theme.getValue()][
                color.getValue()
              ];
            },
          },
        },
      },
    },

    // 開発・本番で異なる設定
    devSourcemap: true,

    // CSS分割設定（本番環境）
    ...(process.env.NODE_ENV === 'production' && {
      rollupOptions: {
        output: {
          assetFileNames: (assetInfo) => {
            if (assetInfo.name.endsWith('.css')) {
              return 'assets/css/[name]-[hash][extname]';
            }
            return 'assets/[name]-[hash][extname]';
          },
        },
      },
    }),
  },
});

パフォーマンス最適化

プリプロセッサのパフォーマンスを最適化するための設定も重要です：

javascript// vite.config.js - パフォーマンス最適化
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // インポートパスの最適化
        includePaths: [
          path.resolve(__dirname, 'src/styles'),
          path.resolve(__dirname, 'node_modules'),
        ],

        // キャッシュの有効化
        cache: true,

        // 並列処理の設定
        fiber: true,

        // ソースマップの最適化
        sourceMap: process.env.NODE_ENV === 'development',
        sourceMapContents: false,
      },
    },

    // CSS の最小化設定（本番環境）
    minify: process.env.NODE_ENV === 'production',

    // 重要でないCSSの遅延読み込み
    extract:
      process.env.NODE_ENV === 'production'
        ? {
            filename: 'assets/css/[name].[hash].css',
            chunkFilename: 'assets/css/[name].[hash].css',
          }
        : false,
  },

  // ビルド最適化
  build: {
    // CSS分割しきい値
    cssCodeSplit: true,

    // チャンクサイズ警告しきい値
    chunkSizeWarningLimit: 1000,

    rollupOptions: {
      output: {
        // CSS を別ファイルに分割
        manualChunks: {
          vendor: ['react', 'react-dom'],
          styles: ['src/styles/main.scss'],
        },
      },
    },
  },
});

プリプロセッサ別の最適化テクニック

各プリプロセッサに特化した最適化も実装できます：

javascript// 環境別設定の分離
const createPreprocessorConfig = (env) => {
  const isDev = env === 'development';

  return {
    scss: {
      additionalData: `
        @import "@/styles/variables${
          isDev ? '-dev' : ''
        }.scss";
        @import "@/styles/mixins.scss";
      `,
      sassOptions: {
        outputStyle: isDev ? 'expanded' : 'compressed',
        sourceComments: isDev,
        precision: 8,
      },
    },
  };
};

export default defineConfig(({ mode }) => ({
  css: {
    preprocessorOptions: createPreprocessorConfig(mode),
  },
}));

これらの設定により、開発環境では快適な開発体験を、本番環境では最適化されたパフォーマンスを実現できます。

まとめ

Vite で CSS プリプロセッサを活用することで、フロントエンド開発の効率性と保守性を大幅に向上させることができます。

Sass/SCSSは最も成熟したエコシステムと豊富な機能を持ち、大規模プロジェクトに最適です。CSS 互換の SCSS 記法により、既存の知識を活かしながら段階的に高度な機能を習得できるでしょう。

Lessは JavaScript 風の記法で学習コストが低く、チーム全体での導入がスムーズに行えます。特に JavaScript に慣れ親しんだ開発者にとって、直感的に理解しやすいプリプロセッサです。

Stylusは最高レベルの柔軟性を提供し、記述量を大幅に削減できます。独自のコーディングスタイルを確立したいプロジェクトや、高度なカスタマイズが必要な場面で威力を発揮します。

Vite の優れた点は、これらのプリプロセッサをゼロコンフィグで利用開始できることです。必要なパッケージをインストールするだけで即座に使い始められ、HMR による高速な開発サイクルを実現できます。

プロジェクトの要件や開発チームの特性に応じて最適なプリプロセッサを選択し、効率的で保守しやすいスタイルシートを作成していきましょう。どのプリプロセッサを選んでも、Vite が提供する優れた開発体験により、スタイリング作業がより楽しく、より生産的になることは間違いありません。

関連リンク

ブログBlog

もっと見る

書籍レビューReview

もっと見る