Fossa Advent Calendar 11日目

アドベントカレンダー

Vite

使用環境①

Name	Version
Rollup	v3.5.1
rollup/plugin-replace	5.0.1
rollup-plugin-scss	v3.0.0
sass	1.56.1
vite	3.2.3

使用環境②

Name	Version
Rollup	v3.7.1
rollup/plugin-replace	5.0.1
rollup-plugin-scss	v4.0.0
sass	1.56.2
vite	4.0.0

前回は、Rollupでしたが、今回は、Viteで試しました。

結論を先に書きますが、Vite Rollup Plugins に記載されている通り、@rollup/plugin-replaceは、Viteで使えました。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import replace from '@rollup/plugin-replace';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    replace({
      include: ['src/**/*.scss'],
      preventAssignment: true,
      values: {
        'uk-': 'fs-'
      }
    })
  ]
});

結果

.fs-sample {
    border: 1px solid #888
}

.fs-sample h3 {
    font-size: 24px
}

.fs-sample .content p {
    color: green
}

結論

Viteでscssを使う場合、rollup-plugin-scssを記載しなくても良いみたいです。

Vite 4.0

この記事を読み直していたら、Viteが、4.0になっていました。