前提・実現したいこと
初めて質問させていただきますので不備があったらご指摘お願いします。
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" } }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/30 05:37