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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

解決済

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

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

3回答

0評価

0クリップ

9365閲覧

投稿2019/02/18 12:03

編集2019/02/23 04:51

発生している問題

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

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

バンドル時のエラー

webpack

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

javascript

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

Javascript

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

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ページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。