質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Q&A

解決済

1回答

1802閲覧

Nuxt v2.10.xでグローバルなscssの変数が読み込めない

fightTT

総合スコア27

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

0グッド

0クリップ

投稿2019/11/22 07:17

編集2019/11/22 07:20

お世話になります。
表題の通り、Nuxtプロジェクト内で、assetsディレクトリ内に作成した.scssファイルから変数を利用としているのですが、エラーが出てしまって進めません。
1日粘っているのですが解決できず、どなたかご教示いただけましたら幸いです。

ちなみに、以下のブログを参考にしております。
nuxt.js で scss のグローバルな変数を使用する

バージョン情報等
モジュール等バージョン
Nuxt.jsv2.10.2
node-sassv4.13.0
sass-loaderv8.0.0
@nuxtjs/style-resourcesv1.0.0
関係するであろうファイルの内容

nuxt.config.ts

js

1 2export default { 3 mode: 'spa', 4 (_省略_) 5 /* 6 ** Global CSS 7 */ 8 css: [ 9 '@/assets/scss/app.scss' 10 ], 11 plugins: [ 12 ], 13 buildModules: [ 14 '@nuxtjs/eslint-module', 15 '@nuxt/typescript-build' 16 ], 17 typescript: { 18 typeCheck: { 19 eslint: true 20 } 21 }, 22 modules: [ 23 '@nuxtjs/axios', 24 '@nuxtjs/pwa', 25 '@nuxtjs/style-resources' // 変数読み込み用に追加 26 ], 27 styleResources: { 28 sass: [ 29 '@/assets/scss/_var.scss' // 読みませたい変数を記述したscssファイル 30 ] 31 }, 32 (_省略_) 33}

package.json(インストールしているパッケージ情報のみ抜粋)

json

1"dependencies": { 2 "@nuxt/typescript-runtime": "^0.2.4", 3 "@nuxtjs/axios": "^5.3.6", 4 "@nuxtjs/pwa": "^3.0.0-0", 5 "nuxt": "^2.0.0" 6 }, 7 "devDependencies": { 8 "@babel/core": "^7.7.2", 9 "@nuxt/typescript-build": "^0.3.4", 10 "@nuxtjs/eslint-config": "^1.0.1", 11 "@nuxtjs/eslint-config-typescript": "^0.1.3", 12 "@nuxtjs/eslint-module": "^1.0.0", 13 "@nuxtjs/style-resources": "^1.0.0", 14 "@storybook/addon-actions": "^5.2.6", 15 "@storybook/addon-links": "^5.2.6", 16 "@storybook/addons": "^5.2.6", 17 "@storybook/vue": "^5.2.6", 18 "@vue/test-utils": "^1.0.0-beta.27", 19 "babel-eslint": "^10.0.1", 20 "babel-jest": "^24.1.0", 21 "babel-loader": "^8.0.6", 22 "babel-preset-vue": "^2.0.2", 23 "css-loader": "^3.2.0", 24 "eslint": "^6.1.0", 25 "eslint-plugin-nuxt": ">=0.4.2", 26 "jest": "^24.1.0", 27 "node-sass": "^4.13.0", 28 "sass-loader": "^8.0.0", 29 "storybook-addon-vue-info": "^1.3.4", 30 "style-loader": "^1.0.0", 31 "vue-jest": "^4.0.0-0", 32 "vue-loader": "^15.7.2", 33 "vue-template-compiler": "^2.6.10" 34 }

_var.sass

scss

1$palette-key: #fff;

エラー内容抜粋

shell

1Module build failed (from ./node_modules/sass-loader/dist/cjs.js): friendly-errors 06:55:33 2SassError: Undefined variable: "$palette-key". 3 on line 22 of /app/components/atoms/buttons/CommonLinkButton.vue 4>> color: $palette-key; 5 6 ---------^

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

これで読み込めるようになるかは定かではないんですがnuxt.config.tsのstyleResourcesに指定している読み込みファイルのタイプがscssではなくsassになってます。他は特に問題ないように思えます。

js

1styleResources: { 2 scss: [ 3 '@/assets/scss/_var.scss' // 読みませたい変数を記述したscssファイル 4 ] 5},

投稿2019/11/22 08:58

nt4c

総合スコア768

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fightTT

2019/11/22 09:23

ご回答ありがとうございます! 一瞬terateilへの入力間違いかと思い手元のwebpack.config.jsを見直してみましたら、思いっきりご指摘のタイプミスをしておりました。。 @nuxtjs/style-resourcesのドキュメントやらソースを見ても解決できず困っておりましたが大変助かりました。 このような基本的なところを見落としておりましてお恥ずかしい限りでございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問