webpackでvueの単一ファイルコンポーネントでSCSSを使おうとバンドル時にエラーが出る

Question

発生している問題

webpackでvueの単一ファイルコンポーネントでSCSSを使おうとバンドル時にエラーが出る

関連するソースコード(エラー)

バンドル時のエラー

ERROR 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
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=css& 1:0-155 1:171-174 1:176-328 1:176-328
 @ ./public/signin/components/flash.vue
 @ ./public/signin/app.js

webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    mode:"development",
    entry:"./public/signin/app.js",
    output:{
        filename:'bundle.js',
        path:__dirname+'/public/signin'
    },
    module:{
        rules:[
            {
                test: /.vue$/,
                exclude:/node_modules/,
                loader:'vue-loader',
                options:{
                    loaders:{
                        scss:ExtractTextPlugin.extract({
                            use:'sass-loader',
                            fallback:'vue-style-loader'
                        })
                    }
                }
            }
        ]
    },
    resolve:{
        extensions:[".js",".vue"],
        alias:{
            vue$:'vue/dist/vue.esm.js'
        }
    },
    plugins:[
        new VueLoaderPlugin(),
        new ExtractTextPlugin('./public/signin/style.css')
    ]
};

2回目のwebpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    mode:"development",
    entry:"./public/signin/app.js",//dynamic
    output:{
        filename:'bundle.js',
        path:__dirname+'/public/signin'//dynamic
    },
    module:{
        rules:[
            {
                test: /.vue$/,
                exclude:/node_modules/,
                loader:'vue-loader'
            },
            {
                test:/.scss$/,
                use:ExtractTextPlugin.extract({use:'sass-loader'})
            }
        ]
    },
    resolve:{
        extensions:[".js",".vue"],
        alias:{
            vue$:'vue/dist/vue.esm.js'
        }
    },
    plugins:[
        new VueLoaderPlugin(),
        new ExtractTextPlugin('./public/signin/style.css')//dynamic
    ]
};

flash.vue

<template>
  <div id="flash-box">
    <p>パスワード,もしくはユーザー名が間違っています</p>
  </div>
</template>
<script>
export default {};
</script>
<style scoped lang="scss">
#flash-box {
  background-color: #ffdce0;
  color: #86181d;
  padding:15px 20px;
  border-radius: 3px;
}
</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

Answer 1

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

Answer 2

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

Comments

[退会済みユーザー]

lang='scss'をつけたしたのですが同じようなエラーが出てしまいました。

付け足した後のvueファイルと2回目のエラーを追記で書いておきました

[yhg]

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

[退会済みユーザー]

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

[yhg]

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

[退会済みユーザー]

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

[退会済みユーザー]

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

[退会済みユーザー]

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

[退会済みユーザー]

エラーが字数制限で載せられませんでした

ここに貼っておきます

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;

[退会済みユーザー]

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

Answer 3

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

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の設定はあってそうでした！
下の方の回答が正解な気がします。

Comments

[yhg]

１年ぐらい前までは質問者様のような設定で公式テンプレートとかも作られてたと思うのですが、今どうなってるのかよく分かってなかったので vue-loader のドキュメント見てみたら、SCSS拡張子に指定するっぽいですね。もしかしたら後方互換でどちらも通るかもしれませんが・・・