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; }
期待する結果には、なりませんでした。