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

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

ただいまの
回答率

89.64%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,733

sakanasharp

score 15

発生している問題

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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 22:23

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/23 14:20

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

    キャンセル

  • 2019/02/23 14: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 14:38

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

    キャンセル

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

  • ただいまの回答率 89.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる