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

Viteは最初はstyle.cssになっている

Viteは「yarn create vite」をターミナルで実行してyarnコマンドでインストールを済ませればすぐに起動できるので誰でも簡単にセットアップできる。

試したことがない方はとりあえず以下のコマンドを実行してみてください。

$ yarn create vite
✔ Project name: … my-scss
✔ Select a framework: › vanilla
✔ Select a variant: › vanilla

Scaffolding project in /Users/iwbjp...

Done. Now run:

  cd my-scss
  yarn
  yarn dev

✨  Done in 7.07s.

※ yarn devと表示されますがviteと入力して実行しても同じです。

Viteは最初のファイル構成がstyle.cssになっているが、現在はSass(SCSS)とAutoprefixerを使用するのが主流なので、このままだと使い勝手が悪い。

この記事ではViteでSass(SCSS)とAutoprefixerを使用する方法について解説しています。

Sass(SCSS)の使用方法

まず以下のコマンドでsassをインストールする。

yarn add --dev sass

あとはstyle.cssをstyle.scssにリネームしてmain.js内のstyle.cssをstyle.scssに変えるだけ。

import './style.scss'

document.querySelector('#app').innerHTML = `
  <h1>Hello Vite!</h1>
  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
`

試しにstyle.scssを以下のようなSCSS記法で書いてページを確認してみてほしい。

#app h1に指定したスタイルが適用されているのが確認できます。

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

  h1 {
    transform: scale(2);
    color: orange;
  }
}

Autoprefixの使用方法

まず以下のコマンドでautoprefixerをインストールする。

yarn add --dev autoprefixer

次にプロジェクトフォルダのルート上に.browserslistrcファイルを作成して以下のように書いて保存する。

last 2 versions
iOS >= 10
not dead

次にルート上にvite.config.jsファイルを作成して以下のように書いて保存する。

import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        require('autoprefixer')
      ]
    }
  }
});

以上の作業が完了したらvite buildでファイルをビルドしてみてください。

distディレクトリが作成され、その中のcssファイル内にベンダープレフィックス(-webkit-)の付いたtransformが追記されています。

#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}#app h1{-webkit-transform:scale(2);transform:scale(2);color:orange}

試しに.browserslistrcを変更して再度vite buildを実行してみてください。

Androidの新しいバージョンではtransformにベンダープレフィックスは不要なので-webkit-が付かない状態で書き出されれいることが確認できます。

#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px}#app h1{transform:scale(2);color:orange}