CSS Prefix
Autoprefixer
の話じゃなくて、CSS Framework
で使われるPrefix
の話です。
CSS Framework
の UIkit
で例えるなら、uk-
のことです。
A
というCSS Framework
で制作していて、B
というCSS Framework
のコンポーネント一つだけ利用したい時があります。
Prefix
がないCSS Framework
を使ったからか、コンパイルすると、きちんと表示されなかったことがありました。
原因を調べると、prefix
を付けても解決できる問題では、ありませんでした。
長年、UIkit
を使っていたからか、私が記述するcss
には、Prefix
付けたいなぁと思いました。
UIkit v3.15.14
UIkit
は、uk-
が標準ですが、別のprefix
に変えられるようになっています。
github.com/uikit/uikit
の中に、build
というフォルダがあり、prefix.js
があります。
ルートフォルダのpackage.json
をみると、"prefix": "node build/prefix"
があります。
使い方は、node build/prefix -p=xyz
を実行すると、uk-
がxyz-
になるはずです。*1
Rollup(Vite)
Rollup
や、Vite
を使うと、Prefix
を変更できましたが、後日、紹介します。
Tailwind CSS v3.2.4
tailwind.config.js
にprefix: 'tw-',
を記述すれば、簡単に付けられます。
Gulp + gulp-css-prefix
Gulp
とgulp-css-prefix
を使うことで、Prefix
を付けることが出来ました。
Gulp
の開発が止まってしまって、惜しいなぁと思います。
// gulpfile.js var gulp = require('gulp'); var cssPrefix = require('gulp-css-prefix'); function prefix() { return gulp .src('./static/assets/css/*.css') .pipe(cssPrefix('spectre-')) .pipe(gulp.dest('./static/assets/css')); } exports.prefix = prefix;
PostCSSのプラグインを使う
後日、紹介する予定です。
*1:まだ試していないです