Fossa Advent Calendar 8日目

アドベントカレンダー

Rollup Part-1

使用環境

Name	Version
Rollup	v3.5.1
rollup-plugin-scss	v3.0.0
sass	1.56.1

ついこないだまで、Webpack や Laravel Mixを使っていたのに、いつのまにか、Vite や Laravel Viteを普通に使っていて、変な感じがします。

Viteを使っていると、Rollupのことが気になり、調べてみました。

GitHubを見ると

２０１５年５月２１日に、version 0.3.1をリリースしたのが、最初。

最新のバージョンは、v3.5.1。

Rollup plugin

github.com

余談ですが、ViteでRollup Pluginが使える場合と、Vite Pluginを使った方が望ましい場合と、２つパターンがありそうです。

rollup-plugin-scss

Rollupで、scssファイルをコンパイラできそうです。

試してみましょう。

npm install --save-dev rollup rollup-plugin-scss@3 sass

// rollup.config.js
import scss from 'rollup-plugin-scss';

export default {
  input: 'input.js',
  output: { file: 'output.js', format: 'esm' },
  plugins: [
    scss()
  ]
};

// input.js
import './example.scss';

npx rollup --config --bundleConfigAsCjs

ちゃんと、cssファイルが生成されました。