Fossa Advent Calendar 9日目

アドベントカレンダー

Rollup Part-2

前回の続きで、scssファイルをコンパイルします。

コンパイルしていると、いつの間にか、 困憊る(コンパイル)しますよね（笑）

今回は、失敗した例なので、お役に立つことは、なさそうです。

rollup-plugin-scss

prefix

rollup-plugin-scssのオプションを見ていると、prefixというのを発見しました。

試してみましょう。

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

export default {
  input: 'input.js',
  output: { file: 'output.js', format: 'esm' },
  plugins: [
    scss({
      prefix: `@import "./fonts.scss";`,
    })
  ]
};

どうやら、@import "./fonts.scss";を挿入した後、コンパイルしているようです。

私が探しているprefixでは、無さそうです。

processor

processorの欄に、css.replaceというのを発見しました。

試してみましょう。

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

export default {
  input: 'input.js',
  output: { file: 'output.js', format: 'esm' },
  plugins: [
    scss({
      processor: css =>
      css.replace('uk-', 'fs-'),
    })
  ]
};

// scssファイルの中身
@charset "UTF-8";

h1 {
  font-size: 36px;
}

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

// コンパイルされたcssファイル
h1 {
  font-size: 36px;
}

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

期待する結果には、なりませんでした。