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

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;
}

@media screen and (min-width: 1000px) {
  .title {
    color: green;
  }
}

.text {
  color: blue;
}

@media screen and (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

export default {
  build: {
    postcss: {
      plugins: {
        'postcss-combine-media-query': {},
      },
    },
  },
};

そうすると

style.css

.title {
  color: red;
}

.text {
  color: blue;
}

@media screen and (min-width: 1000px) {
  .title {
    color: green;
  }

  .text {
    color: yellow;
  }
}

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

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