Sass

インストール

@rsbuild/plugin-sass プラグインをインストールする必要があります:

pnpm
npm
yarn
bun
pnpm add -D @rsbuild/plugin-sass sass

設定

addfox.config.ts にプラグインを追加:

import { defineConfig } from "addfox";
import { pluginSass } from "@rsbuild/plugin-sass";

export default defineConfig({
  plugins: [pluginSass()],
});

使用

インストールと設定後、直接 .scss ファイルを作成してインポートできます:

/* app/popup/index.scss */
$brand: #7c3aed;

.card {
  border: 1px solid $brand;
  color: $brand;
}
import "./index.scss";

説明

  • モジュール化されたスタイルを使用する場合は、*.module.scss と組み合わせて使用できます
  • プラグインは Sass ファイルのコンパイルとインポートを自動的に処理します