Fossa Advent Calendar 10日目

アドベントカレンダー

Rollup Part-3

前回の続きです。

使用環境

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

@rollup/plugin-replace

RollupのCore Pluginsの中に、@rollup/plugin-replaceがあるのを、発見しました。

試してみましょう。

npm install @rollup/plugin-replace --save-dev

失敗例

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

export default {
  input: 'input.js',
  output: { file: 'output.js', format: 'esm' },
  plugins: [
    scss(),
    replace({
      include: ['**/*.scss'],
      preventAssignment: true,
      values: {
        'uk-': 'fs-'
      }
    })
  ]
};

望み通りの結果になったと思ったのは勘違いで、再確認すると、望み通りの結果は得ていませんでした

成功例

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

export default {
  input: 'input.js',
  output: { file: 'output.js', format: 'esm' },
  plugins: [
    replace({
      include: ['**/*.scss'],
      preventAssignment: true,
      values: {
        'uk-': 'fs-'
      }
    }),
    scss()
  ]
};

プラグインの記述位置を変えると、望み通りの結果になりました。

jsファイル内の文字列置換が、きちんと行われているのを確認した後、includeを設定すると、jsファイルに影響が出ませんでした。

結果

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