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

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

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

assets/css/_variables.scss
$primary: #1aaed6;
sample.vue
<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!

検証した環境

1 nuxt 2.14.3
2 @nuxtjs/style-resources 1.0.0

style-resourcesを使う

インストール

パッケージを追加します

$ yarn add -D @nuxtjs/style-resources

設定する

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


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

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

assets/
  css/
    _variables.scss
assets/css/_variables.scss
$primary: #1aaed6;
$black: #000;




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

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

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

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

おすすめ