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

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

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

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

Sass

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

nuxt.jsにて、SCSSに書いたmixinを他のSCSSで使用することは可能でしょうか?

dichikawa1016
dichikawa1016

総合スコア13

Nuxt.js

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

Sass

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1回答

1評価

0クリップ

561閲覧

投稿2018/10/31 03:39

前提・実現したいこと

初めて質問させていただきますので不備があったらご指摘お願いします。

Webサービスをnuxt.jsにてatomic Designのサービスの開発をしております。
その際、例)のように scss/mixin.scssにまとめた mixinを他のSCSSで @includeにて使用したいと考えていますが可能でしょうか?
よい方法があれば教えていただければと思います。

scss - mixin.scss //mixinを指定 ├ variable.scss //変数を指定 ├ style.scss //mixinと変数を使いたいscss └ test.scss //mixinと変数を使いたいscss

nuxt-sass-resources-loaderを利用してみたところ変数は他のSCSSにて使用できたのですが mixinは使用できず、下記のようなエラーメッセージが出てしまいます。

エラー内容

ERROR Failed to compile with 1 errors 11:58:24 error in ./node_modules/bulma/bulma.sass Module build failed (from ./node_modules/sass-loader/lib/loader.js): undefined ^ Invalid CSS after "@mixin test {": expected "}", was "{" in /Users/user/Desktop/works/*****/node_modules/bulma/bulma.sass (line 32, column 14) @ ./node_modules/bulma/bulma.sass 4:14-233 14:3-18:5 15:22-241 @ ./.nuxt/App.js @ ./.nuxt/index.js @ ./.nuxt/client.js @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

該当のソースコード

【nuxt.config.js】に記述

module.exports = { ~~~~~~~~ /* 変数定義 */ modules: [ [ 'nuxt-sass-resources-loader', ['~assets/scss/variable.scss', '~assets/scss/mixin.scss'], ], ], }

【mixin.scss】

@charset "utf-8"; @mixin test { background: #000; color: #fff; }

【style.scss】(mixinを使いたいSCSS)

.test-project { width:100%; @include test; }

補足情報(FW/ツールのバージョンなど)

{ "name": "test", "version": "1.0.0", "description": "test", "author": "TEST <TEST@gmail.com>", "private": true, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate", "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", "precommit": "npm run lint" }, "dependencies": { "bulma": "^0.7.1", "eslint-config-airbnb-base": "^13.1.0", "eslint-config-prettier": "^3.1.0", "eslint-config-typescript": "^1.1.0", "eslint-import-resolver-alias": "^1.1.1", "eslint-plugin-import": "^2.14.0", "eslint-plugin-prettier": "^2.7.0", "eslint-plugin-react": "^7.11.1", "nuxt": "^2.0.0", "nuxt-sass-resources-loader": "^2.0.5", "stylelint-config-recess-order": "^2.0.0", "stylelint-webpack-plugin": "^0.10.5", "typescript-eslint-parser": "^19.0.2", "vue-eslint-parser": "^3.2.2" }, "devDependencies": { "@nuxtjs/bulma": "^1.2.1", "babel-eslint": "^8.2.6", "eslint": "^4.19.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-vue": "^4.7.1", "node-sass": "^4.9.4", "sass-loader": "^7.1.0", "stylelint": "^9.6.0", "stylelint-config-prettier": "^4.0.0", "stylelint-config-standard": "^18.2.0", "stylelint-scss": "^3.3.1" } }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Nuxt.js

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

Sass

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。