Q&A
ちなみに、package-lock.jsonを見てみると、
各バージョンは以下です。
```
sass-loader: 11.1.1
css-loader5.2.7
vue-style-loader4.1.3
style-loader2.0.0
```
Laravelの環境下でVue.jsを動かそうとしています（SPA等ではなく、UIコンポーネントとして）。
その際に、Vue.js内部に各SassのGlobal Setteing系（変数やMixin）を共通のファイルにして
全コンポーネントから自動で使えるようにしようと
sass-resources-loader ( https://github.com/shakacode/sass-resources-loader ) を導入しようとしています。
Laravel Mix ( https://laravel-mix.com )にて設定をしようとしているのですが、うまくいきません。
【環境】
Laravel Framework 8.77.1
[package.json ※ script 除く] { "devDependencies": { "@popperjs/core": "^2.10.2", "axios": "^0.21", "bootstrap": "^5.1.3", "browser-sync": "^2.27.7", "browser-sync-webpack-plugin": "^2.3.0", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14", "resolve-url-loader": "^3.1.2", "sass": "^1.32.11", "sass-loader": "^11.0.1", "vue": "^2.6.12", "vue-loader": "^15.9.8", "vue-template-compiler": "^2.6.12" }, "dependencies": { "sass-resources-loader": "^2.2.4" } }
【実行したこと 導入前】
↓はsass-resources-loaderが動いていない状態で、正常に動きます。
[webpack.mix.js] const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .vue() .sass('resources/sass/app.scss', 'public/css') .version();
【実行したこと 導入後】
↓こちらを記載するとエラーが出ます。
[webpack.mix.js] const mix = require('laravel-mix'); const path = require('path'); mix.js('resources/js/app.js', 'public/js') .vue() .sass('resources/sass/app.scss', 'public/css') .version() .webpackConfig({ module: { rules: [ { test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', 'sass-loader', { loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, 'resources/sass/_variables.scss') } } ] } ] } });
※注釈： 「vue-style-loader」「css-loader」「sass-loader」 は「package-lock.json」には記載があります。
[php側 エラー内容] Exception Unable to locate Mix file: /css/app.css. (View: /app/resources/views/layouts/app.blade.php)
※注釈： 「app.blade.php」はmix()を使ってcss・jsの読み込みHTMLを書いているファイルだから出てる…のかな？
[Node側 エラー内容] ERROR in ./resources/js/components/ExampleFooter.vue?vue&type=style&index=0&id=4cc3866c&lang=scss&scoped=true& (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-12[0].rules[0].use[3]!./node_modules/vue-style-loader/index.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/sass-resources-loader/lib/loader.js??clonedRuleSet-22[0].rules[0].use[3]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/ExampleFooter.vue?vue&type=style&index=0&id=4cc3866c&lang=scss&scoped=true&) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: expected "{". ╷ 4 │ var content = require("!!../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!../../../node_modules/sass-resources-loader/lib/loader.js??clonedRuleSet-22[0].rules[0].use[3]!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ExampleFooter.vue?vue&type=style&index=0&id=4cc3866c&lang=scss&scoped=true&"); │ ^ ╵ resources/js/components/ExampleFooter.vue 4:357 root stylesheet ERROR in ./resources/js/components/layout/Footer.vue?vue&type=style&index=0&id=e4df7ff6&lang=scss&scoped=true& (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-12[0].rules[0].use[3]!./node_modules/vue-style-loader/index.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/sass-resources-loader/lib/loader.js??clonedRuleSet-22[0].rules[0].use[3]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/layout/Footer.vue?vue&type=style&index=0&id=e4df7ff6&lang=scss&scoped=true&) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: expected "{". ╷ 4 │ var content = require("!!../../../../node_modules/css-loader/dist/cjs.js!../../../../node_modules/sass-loader/dist/cjs.js!../../../../node_modules/sass-resources-loader/lib/loader.js??clonedRuleSet-22[0].rules[0].use[3]!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Footer.vue?vue&type=style&index=0&id=e4df7ff6&lang=scss&scoped=true&"); │ ^ ╵ resources/js/components/layout/Footer.vue 4:362 root stylesheet ERROR in ./resources/sass/app.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: expected "{". ╷ 4 │ var content = require("!!../../node_modules/css-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js!../../node_modules/sass-resources-loader/lib/loader.js??clonedRuleSet-22[0].rules[0].use[3]!./app.scss"); │ ^ ╵ resources/sass/app.scss 4:215 root stylesheet at processResult (/app/node_modules/webpack/lib/NormalModule.js:751:19) at /app/node_modules/webpack/lib/NormalModule.js:853:5 at /app/node_modules/loader-runner/lib/LoaderRunner.js:399:11 at /app/node_modules/loader-runner/lib/LoaderRunner.js:251:18 at context.callback (/app/node_modules/loader-runner/lib/LoaderRunner.js:124:13) at /app/node_modules/sass-loader/dist/index.js:54:7 at Function.call$2 (/app/node_modules/sass/sass.dart.js:98905:16) at render_closure1.call$2 (/app/node_modules/sass/sass.dart.js:84431:12) at _RootZone.runBinary$3$3 (/app/node_modules/sass/sass.dart.js:29484:18) at _FutureListener.handleError$1 (/app/node_modules/sass/sass.dart.js:28006:21) at _Future__propagateToListeners_handleError.call$0 (/app/node_modules/sass/sass.dart.js:28313:49) at Object._Future__propagateToListeners (/app/node_modules/sass/sass.dart.js:3896:77) at _Future._completeError$2 (/app/node_modules/sass/sass.dart.js:28159:9) at _AsyncAwaitCompleter.completeError$2 (/app/node_modules/sass/sass.dart.js:27807:12) at Object._asyncRethrow (/app/node_modules/sass/sass.dart.js:3699:17) at /app/node_modules/sass/sass.dart.js:19760:20 1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details) webpack compiled with 4 errors
※注釈： 「ExampleFooter.vue」「Footer.vue」は、Vue.jsが動かせることを確認するために置いているお試しファイルです。
あなたの回答
tips
プレビュー
