
発生している問題
webpackでvueの単一ファイルコンポーネントでSCSSを使おうとバンドル時にエラーが出る
関連するソースコード(エラー)
バンドル時のエラー
webpack
1ERROR in ./public/signin/components/flash.vue?vue&type=style&index=0&id=84500228&scoped=true&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./public/signin/components/flash.vue?vue&type=style&index=0&id=84500228&scoped=true&lang=css&) 10:0 2Module parse failed: Unexpected character '#' (10:0) 3You may need an appropriate loader to handle this file type. 4| 5| 6> #flash-box { 7| background-color: #ffdce0; 8| color: #86181d; 9 @ ./public/signin/components/flash.vue?vue&type=style&index=0&id=84500228&scoped=true&lang=css& 1:0-155 1:171-174 1:176-328 1:176-328 10 @ ./public/signin/components/flash.vue 11 @ ./public/signin/app.js
webpack.config.js
javascript
1const VueLoaderPlugin = require('vue-loader/lib/plugin'); 2const ExtractTextPlugin = require('extract-text-webpack-plugin'); 3 4module.exports = { 5 mode:"development", 6 entry:"./public/signin/app.js", 7 output:{ 8 filename:'bundle.js', 9 path:__dirname+'/public/signin' 10 }, 11 module:{ 12 rules:[ 13 { 14 test: /.vue$/, 15 exclude:/node_modules/, 16 loader:'vue-loader', 17 options:{ 18 loaders:{ 19 scss:ExtractTextPlugin.extract({ 20 use:'sass-loader', 21 fallback:'vue-style-loader' 22 }) 23 } 24 } 25 } 26 ] 27 }, 28 resolve:{ 29 extensions:[".js",".vue"], 30 alias:{ 31 vue$:'vue/dist/vue.esm.js' 32 } 33 }, 34 plugins:[ 35 new VueLoaderPlugin(), 36 new ExtractTextPlugin('./public/signin/style.css') 37 ] 38};
2回目のwebpack.config.js
Javascript
1const VueLoaderPlugin = require('vue-loader/lib/plugin'); 2const ExtractTextPlugin = require('extract-text-webpack-plugin'); 3 4module.exports = { 5 mode:"development", 6 entry:"./public/signin/app.js",//dynamic 7 output:{ 8 filename:'bundle.js', 9 path:__dirname+'/public/signin'//dynamic 10 }, 11 module:{ 12 rules:[ 13 { 14 test: /.vue$/, 15 exclude:/node_modules/, 16 loader:'vue-loader' 17 }, 18 { 19 test:/.scss$/, 20 use:ExtractTextPlugin.extract({use:'sass-loader'}) 21 } 22 ] 23 }, 24 resolve:{ 25 extensions:[".js",".vue"], 26 alias:{ 27 vue$:'vue/dist/vue.esm.js' 28 } 29 }, 30 plugins:[ 31 new VueLoaderPlugin(), 32 new ExtractTextPlugin('./public/signin/style.css')//dynamic 33 ] 34};
flash.vue
vue
1<template> 2 <div id="flash-box"> 3 <p>パスワード,もしくはユーザー名が間違っています</p> 4 </div> 5</template> 6<script> 7export default {}; 8</script> 9<style scoped lang="scss"> 10#flash-box { 11 background-color: #ffdce0; 12 color: #86181d; 13 padding:15px 20px; 14 border-radius: 3px; 15} 16</style>
2回目のエラー
ERROR in ./public/signin/components/flash.vue?vue&type=style&index=0&id=84500228&scoped=true&lang=scss& (./node_modules/vue-loader/lib??vue-loader-options!./public/signin/components/flash.vue?vue&type=style&index=0&id=84500228&scoped=true&lang=scss&) 10:0 Module parse failed: Unexpected character '#' (10:0) You may need an appropriate loader to handle this file type. | | > #flash-box { | background-color: #ffdce0; | color: #86181d; @ ./public/signin/components/flash.vue?vue&type=style&index=0&id=84500228&scoped=true&lang=scss& 1:0-156 1:172-175 1:177-330 1:177-330 @ ./public/signin/components/flash.vue @ ./public/signin/app.js
3回目のエラー
Hash: 436ab506b9718a58f0e5 Version: webpack 4.29.4 Time: 12045ms Built at: 2019-02-23 13:42:12 Asset Size Chunks Chunk Names bundle.js 363 KiB main [emitted] main Entrypoint main = bundle.js [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built] [./public/signin/app.js] 192 bytes {main} [built] + 12 hidden modules ERROR in ./public/signin/components/flash.vue?vue&type=style&index=0&id=84500228&scoped=true&lang=scss& (./node_modules/extract-text-webpack-plugin/dist/loader.js??ref--1-0!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./public/signin/components/flash.vue?vue&type=style&index=0&id=84500228&scoped=true&lang=scss&) Module build failed (from ./node_modules/extract-text-webpack-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js): Error: Cannot find module 'node-sass' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.Module._load (internal/modules/cjs/loader.js:507:25) at Module.require (internal/modules/cjs/loader.js:637:17) at require (C:\settask\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at Object.sassLoader (C:\settask\node_modules\sass-loader\lib\loader.js:46:72) at runLoaders (C:\settask\node_modules\webpack\lib\NormalModule.js:301:20) at C:\settask\node_modules\loader-runner\lib\LoaderRunner.js:367:11 at C:\settask\node_modules\loader-runner\lib\LoaderRunner.js:233:18 at runSyncOrAsync (C:\settask\node_modules\loader-runner\lib\LoaderRunner.js:143:3) at iterateNormalLoaders (C:\settask\node_modules\loader-runner\lib\LoaderRunner.js:232:2) at iterateNormalLoaders (C:\settask\node_modules\loader-runner\lib\LoaderRunner.js:221:10) at C:\settask\node_modules\loader-runner\lib\LoaderRunner.js:236:3 at Object.context.callback (C:\settask\node_modules\loader-runner\lib\LoaderRunner.js:111:13) at selectBlock (C:\settask\node_modules\vue-loader\lib\select.js:39:19) at Object.module.exports (C:\settask\node_modules\vue-loader\lib\index.js:79:12) @ ./public/signin/components/flash.vue?vue&type=style&index=0&id=84500228&scoped=true&lang=scss& (./node_modules/extract-text-webpack-plugin/dist/loader.js??ref--1-0!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./public/signin/components/flash.vue?vue&type=style&index=0&id=84500228&scoped=true&lang=scss&) ERROR in ./public/signin/components/flash.vue?vue&type=style&index=0&id=84500228&scoped=true&lang=scss& (./node_modules/extract-text-webpack-plugin/dist/loader.js??ref--1-0!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./public/signin/components/flash.vue?vue&type=style&index=0&id=84500228&scoped=true&lang=scss&) Module build failed (from ./node_modules/sass-loader/lib/loader.js): Error: Cannot find module 'node-sass' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.Module._load (internal/modules/cjs/loader.js:507:25) at Module.require (internal/modules/cjs/loader.js:637:17) at require (C:\settask\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at Object.sassLoader (C:\settask\node_modules\sass-loader\lib\loader.js:46:72) @ ./public/signin/components/flash.vue?vue&type=style&index=0&id=84500228&scoped=true&lang=scss& 1:0-279 1:295-298 1:300-576 1:300-576 @ ./public/signin/components/flash.vue @ ./public/signin/app.js Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/sass-loader/lib/loader.js!node_modules/vue-loader/lib/index.js??vue-loader-options!public/signin/components/flash.vue?vue&type=style&index=0&id=84500228&scoped=true&lang=scss&: Entrypoint undefined = extract-text-webpack-plugin-output-filename 1 module ERROR in ./public/signin/components/flash.vue?vue&type=style&index=0&id=84500228&scoped=true&lang=scss& (./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./public/signin/components/flash.vue?vue&type=style&index=0&id=84500228&scoped=true&lang=scss&) Module build failed (from ./node_modules/sass-loader/lib/loader.js): Error: Cannot find module 'node-sass' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.Module._load (internal/modules/cjs/loader.js:507:25) at Module.require (internal/modules/cjs/loader.js:637:17) at require (C:\settask\node_modules\v8-compile-cache\v8-compile-cache.js:159:20) at Object.sassLoader (C:\settask\node_modules\sass-loader\lib\loader.js:46:72)
実現したいこと
バンドルできるようにしたいです
環境
node:10.15.0
npm:6.4.1
webpack:4.28.3
node-sass:4.11.0
extract-text-webpack-plugin:4.0.0-beta.0
vue-loader:15.6.2
vue-template-compiler:2.6.6
css-loader:2.1.0
style-loader:0.23.1
sass-loader:7.1.0
vue:2.6.6
回答3件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。