前提・実現したいこと
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"
あなたの回答
tips
プレビュー