ロゴテキスト ロゴ

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

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

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

    $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!

    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>
    プロフィールの背景画像 プロフィール画像
    Yuki Takara
    都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。