Fossa Advent Calendar 14日目

アドベントカレンダー

Rollup Part-4

使用環境

Name	Version
Rollup	v3.7.1
rollup-plugin-scss	v4.0.0
sass	1.56.2

rollup-plugin-scss

rollup-plugin-scssのドキュメントを再確認しました。

ドキュメントから引用します。

// Run postcss processor before output
  processor: () => postcss([autoprefixer({ overrideBrowserslist: 'Edge 18' })]),

すると、processorの欄にPostCSSを使用している設定を発見しました。

rollup-plugin-scssからPostCSSのプラグインが使えるのかもしれません。

試してみましょう。

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

export default {
  input: 'src/input.js',
  output: { file: 'public/output.js', format: 'esm' },
  plugins: [
    scss({
      processor: () => postcss([rename({
        strategy: 'none',
        by: 'whole',
        prefix: 'fs-',
      })]),
    })
  ]
};

結果

変更前

.uk-sample {
  border: 1px solid #888;
}
.uk-sample h3 {
  font-size: 24px;
}
.uk-sample .fs-content p {
  color: green;
}

変更後

.fs-uk-sample {
  border: 1px solid #888;
}
.fs-uk-sample h3 {
  font-size: 24px;
}
.fs-uk-sample .fs-content p {
  color: green;
}

結論

fs-が付いているので、動くことは確認できました。

数日で、バージョンが更新されることがあるので、使用したバージョンを記載するのは大切だと思いました。

どのバージョンでも同じように動作するとは限りませんからね。