Cntlog > スキルアップ・ノウハウ > JavaScript・jQuery > Nuxt.jsでSCSSの変数をvueファイルでも使えるようにする

Nuxt.jsでSCSSの変数をvueファイルでも使えるようにする

Nuxt.jsを使ってみるとSCSSで設定した変数やMixinがVueファイルで使えなかったのでVueファイルでも使える用に設定する方法を紹介します。

インストール

まずはnpmで下記をインストールします。


npm add --dev node-sass sass-loader
npm add --dev nuxt-sass-resources-loader

nuxt.config.jsを編集する

nuxt.config.jsに全体で読み込ませたいファイルを設定します。

module.exports = {
  modules: [
    ['nuxt-sass-resources-loader', [
      '@/assets/sass/config/variable.scss',
      '@/assets/sass/config/mixin.scss',
    ]],
  ],
}

私はNuxt.jsは下記のディレクトリ構成にしていますので、必要に合わせてパスは変更してください。

これで設定完了です。
簡単でしょ(*ゝω・*)

関連記事

Vue.jsの入門レベルを学ぶためにやったこと... ここ3ヶ月くらい気になっていたVue.jsを使うようになりました。 私はJSがそれほど得意ではないのですが、Veu.jsは日本語の情報も多くて、調べると結構情報が出てきます。 とはいえ、初めて使うあるあるだと思うのですが、何から手を付けていいかわからない問題に出くわすと思います。 手探...
【JavaScript】PCサイトかスマートフォンサイトを選択させるスクリプト... PC向けサイトにアクセスした際にスマートフォン向けサイトを表示するか選択してもらうスクリプトを書きました。 今回はJavaScriptで作っています。 //iPhone、iPad、AndroidのURLをリダイレクト(選択)させる $(function(){ ...
簡単にスクロールアニメーションが設定できるAOS(jQuery不要)... 最近のWebサイトを見ているとメインビジュアルのアニメーション以外にもスクロール時にコンテンツの一部がアニメーションしてるページが増えてきました。 一つ一つJSで操作を管理すると結構手間になりますがライブラリを使えば、簡単に出来るものもあります。 今回はJSをほぼ書かずに簡単にスクロール...
初めてjQueryプラグインを作ってみた(RSS取得)... 最近社内でJSを書く機会が増えてきたので、他の人にも扱いやすいようにと思ってjQueryプラグインにする事を思いつきました。 作ったプラグインの内容はRSSを取得・表示させるためのjqueryプラグインです。 「WordPressならそんなのデフォルトで入ってるやん…」って思ったくら...