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 だと、コンポーネントごとにしかまとまらないけど、全部バラバラになるよりはマシ。