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件

ベストアンサー

最後のwebpack.config.jsのextract-text-pluginにcss-loaderの設定を付け足したら成功しました

投稿2019/02/23 05:41

退会済みユーザー

総合スコア0

エラーの...scoped=true&lang=cssからしてCSSだと解釈されてるような。
Vue単一ファイルの<style>にlang="scss"書いてないとか。
webpack の設定自体は問題ないと思います。

投稿2019/02/18 13:08

yhg

総合スコア2161

回答へのコメント

退会済みユーザー

2019/02/19 12:01

lang='scss'をつけたしたのですが同じようなエラーが出てしまいました。付け足した後のvueファイルと2回目のエラーを追記で書いておきました

yhg

2019/02/19 12:56

2回目のエラーが追記されていないです

退会済みユーザー

2019/02/20 10:55

すみません,間違えていました! 直しておきました

yhg

2019/02/20 11:57

私が指摘した点に加えて、yu-smcさんの指摘されている点も怪しいので、そちらも試してみてはいかがでしょうか？

退会済みユーザー

2019/02/23 04:55

.scssに対しての設定に変えたのですが、またエラーが出てしまいました。自分でも調べるつもりですが、一応追記しておきました。

退会済みユーザー

2019/02/23 04:59

すみません、二度書いてしまいました

退会済みユーザー

2019/02/23 05:20

たぶんプロジェクトの中にnode-sassを入れればいいのかなと思い入れてみたのですがまたエラーが出てしまいました。追記しました

退会済みユーザー

2019/02/23 05:25

エラーが字数制限で載せられませんでしたここに貼っておきます Hash: a8b5a8e4671e1929bdea Version: webpack 4.29.4 Time: 14037ms Built at: 2019-02-23 14:15:08 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): ModuleParseError: Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type. > #flash-box { | background-color: #ffdce0; | color: #86181d; at handleParseError (C:\settask\node_modules\webpack\lib\NormalModule.js:447:19) at doBuild.err (C:\settask\node_modules\webpack\lib\NormalModule.js:481:5) at runLoaders (C:\settask\node_modules\webpack\lib\NormalModule.js:342:12) at C:\settask\node_modules\loader-runner\lib\LoaderRunner.js:373:3 at iterateNormalLoaders (C:\settask\node_modules\loader-runner\lib\LoaderRunner.js:214:10) 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 context.callback (C:\settask\node_modules\loader-runner\lib\LoaderRunner.js:111:13) at Object.render [as callback] (C:\settask\node_modules\sass-loader\lib\loader.js:76:9) at Object.done [as callback] (C:\settask\node_modules\neo-async\async.js:8077:18) at options.success (C:\settask\node_modules\node-sass\lib\index.js:308:32) @ ./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&) 1:0 Module parse failed: Unexpected character '#' (1: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-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&) 1:0 Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type. > #flash-box { | background-color: #ffdce0; | color: #86181d;

退会済みユーザー

2019/02/23 05:38

css-loaderを付け足したら成功しました!

エラーメッセージそのままググってみるなどしましたか？

You may need an appropriate loader to handle this file type.
というエラー文から、extractTextPluginを使ってsass-loaderを指定しているあたりが怪しいと見当つきます。

vue拡張子に対してsass-loaderを使うという記述がみられますが、以下記事のようにsass-loaderはscss拡張子に指定するのが正解っぽいです。

https://qiita.com/shin1kt/items/1cf18c7c85ba8daa8b38

このように記述してもうまくいかなかったらすみませんが教えてください。

<追記>
申し訳ないです、　webpackの設定はあってそうでした！
下の方の回答が正解な気がします。

投稿2019/02/18 13:08

編集2019/02/18 13:12