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

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

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

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Q&A

0回答

2656閲覧

larave-mixでvueのscssが反映されない。

ponto

総合スコア4

Vue.js

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

0グッド

0クリップ

投稿2020/05/11 13:24

前提・実現したいこと

Laravel5.2からLaravel-Mixを使用しVueコンポーネントを使用しています。
LaravelのbladeからVueコンポーネントの使用はできておりますが、コンポーネント内に記載しているscssが反映されません。

webpack.mix.jsの構成が問題かと思い試していますが、どの様にすれば良いでしょうか。

発生している問題・エラーメッセージ

エラーメッセージ
ERROR in ./resources/assets/js/components/base/BaseModal/index.vue?vue&type=style&index=0&lang=scss&module=true& (./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js??ref--11-1!./node_modules/sass-loader/dist/cjs.js??ref--11-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/assets/js/components/base/BaseModal/index.vue?vue&type=style&index=0&lang=scss&module=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??ref--11-1!../../../../../../node_modules/sass-loader/dist/cjs.js??ref--11-2!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=style&index=0&lang=scss&module=true&"); │

該当のソースコード

webpack.mix.js

const additionalWebpackConfig = { resolve: { alias: { '@': resolve(__dirname, ROOT_PATH, 'js'), '~': resolve(__dirname, ROOT_PATH) } }, module: { rules: [ { enforce: 'pre', exclude: /node_modules/, loader: 'eslint-loader', test: /.(js|vue)?$/ }, { test: /.(sass|scss)$/, use: [ 'vue-style-loader', { loader: 'css-loader', options: { modules: true } }, { loader: 'sass-loader', options: { prependData: ` @import '~/sass/common.scss'; @import '~/sass/_variable.scss'; ` } } ] } ] } };

devDependencies(package.json)

"laravel-mix": "^5.0.1", "resolve-url-loader": "^3.1.0", "sass": "^1.15.2", "sass-loader": "^8.0.0", "style-loader": "^1.1.3", "vue-loader": "^15.9.1", "vue-styleguidist": "^4.17.0", "vue-svg-loader": "^0.16.0"

dependencies(package.json)

"vue": "^2.6.11", "vue-select": "^3.10.0", "vuex": "^3.1.3"

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問