Nuxtでstyle-resourcesを用いてグローバルなscssを使いやすくする

CSS関係の実装をしていて色を変数化しグローバルからimportして使う、という事は良くあると思います。

$primary: #1aaed6;

<style lang="scss">
@import "assets/css/variables";
 
.title {
    color: $primary;
}
</style>

この方法の欠点として _variables.scss などで定義した変数を使いたいvueファイル全てで、importをする必要が出てきます。

当然毎回書くのは大変ですし、もしファイル名やフォルダ名を変更した場合、使用しているファイル全てに影響が出ます。

@nuxtjs/style-resources を用いる事でimportを書く手間をなくす事が出来ます！ nuxt-community/style-resources-module: Nobody likes extra @import statements!

style-resourcesを使う

インストール

パッケージを追加します

$ yarn add -D @nuxtjs/style-resources

設定する

まずscssの変数を定義するためのファイルを用意します。

Nuxt.jsの公式が assets/css/ 配下に作成しているのでそちらに合わせて。

assets/styles/ ・ assets/scss/ としても良さそうな感じもしますね 🤔

assets/
  css/
    _variables.scss

$primary: #1aaed6;
$black: #000;

nuxt.config.jsのmodulesとグローバルで読み込ませたいscssファイルを設定します。

export default {
  modules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: ['./assets/css/_variables.scss'],
  },
}

あとは使いたいコンポーネントでimportを使わずに読み込めば完了です！

<style lang="scss">
.title {
    background-color: $black;
    color: $primary;
}
</style>