Vite + SvelteでSass(SCSS)とAutoprefixerを使用する方法

Vite + SvelteでSCSS + Autoprefixer

Svelteをインストールする際は以下のコマンドを使用します。

npm create vite@latest my-svelte -- --template svelte
cd my-svelte
npm install

Sass(SCSS)を使用したい場合は、styleに「lang="scss"」を付けるだけで使用可能です。

<h1>Hello world!</h1>

<style lang="scss">
  $color: green;

  h1 {
    color: $color;
    transform: scale(0.9);
  }
</style>

これはvitePreprocessにより、PostCSSやSCSSなどがデフォルトで使用できるようになっているためです。

次項でAutoprefixerについて解説しますので、結果を確認しやすいよう、main.jsの「import './app.css'」はコメントアウトして読み込まないようにしてください。

// import './app.css'
import App from './App.svelte'

const app = new App({
  target: document.getElementById('app'),
})

export default app

AutoprefixerはVite + Svelteの環境には含まれていないため、自身で色々と用意が必要です。

まず、以下のコマンドでAutoprefixerをインストールします。

npm i -D autoprefixer

次にルートディレクトリに .browserslistrc ファイルを作成して、対象ブラウザを指定します。

今回の例ではtransformプロパティに -webkit- のベンダープレフィックスが付くように以下のように設定します。

last 2 versions
iOS >= 7
not dead

最後に postcss.config.cjs を作成して、以下のコードを書いて保存してください。

module.exports = {
  plugins: {
    autoprefixer: {},
  },
}

※ postcss.config.js ではなく postcss.config.cjs です。

以上の手順が完了した状態で「npm run build」を実行すれば、Autoprefixerが機能してCSSにベンダープレフィックスが自動追加されます。

h1.svelte-7bwm4n{color:green;-webkit-transform:scale(.9);transform:scale(.9)}