Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8644

scss で media query を遠くに書きたくないが、出力サイズも減らしたい

$
0
0
style.scss
.title{color:red;}.text{color:blue;}@media#{pc}{.title{color:green;}.text{color:yellow;}}

とか遠くに書くのは嫌だ。

なので

style.scss
.title{color:red;@media#{pc}{color:green;}}.text{color:blue;@media#{pc}{color:yellow;}}

scss 使ってるならこう書きたい。

でも、コンパイルすると

style.css
.title{color:red;}@mediascreenand(min-width:1000px){.title{color:green;}}.text{color:blue;}@mediascreenand(min-width:1000px){.text{color:yellow;}}

同じ media query が吐き出されてしまって、サイズが大きくなる

何かしらで postcss を使っているなら postcss-combine-media-queryを使う

Nuxt で作ってるなら nuxt.config.js の build に追記する

yarn add -D postcss-combine-media-query
nuxt.config.js
exportdefault{build:{postcss:{plugins:{'postcss-combine-media-query':{},},},},};

そうすると

style.css
.title{color:red;}.text{color:blue;}@mediascreenand(min-width:1000px){.title{color:green;}.text{color:yellow;}}

このようにまとまって嬉しい。

なお Nuxt だと、コンポーネントごとにしかまとまらないけど、全部バラバラになるよりはマシ。


Viewing all articles
Browse latest Browse all 8644

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>