teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問webpackでvueの単一ファイルコンポーネントでSCSSを使おうとバンドル時にエラーが出る

編集履歴

質問編集履歴

3

エラーと変更したファイルの追記

2019/02/23 04:51

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -114,6 +114,80 @@
114
114
 
115
115
  ```
116
116
 
117
+ 2回目のwebpack.config.js
118
+
119
+ ```Javascript
120
+
121
+ const VueLoaderPlugin = require('vue-loader/lib/plugin');
122
+
123
+ const ExtractTextPlugin = require('extract-text-webpack-plugin');
124
+
125
+
126
+
127
+ module.exports = {
128
+
129
+ mode:"development",
130
+
131
+ entry:"./public/signin/app.js",//dynamic
132
+
133
+ output:{
134
+
135
+ filename:'bundle.js',
136
+
137
+ path:__dirname+'/public/signin'//dynamic
138
+
139
+ },
140
+
141
+ module:{
142
+
143
+ rules:[
144
+
145
+ {
146
+
147
+ test: /.vue$/,
148
+
149
+ exclude:/node_modules/,
150
+
151
+ loader:'vue-loader'
152
+
153
+ },
154
+
155
+ {
156
+
157
+ test:/.scss$/,
158
+
159
+ use:ExtractTextPlugin.extract({use:'sass-loader'})
160
+
161
+ }
162
+
163
+ ]
164
+
165
+ },
166
+
167
+ resolve:{
168
+
169
+ extensions:[".js",".vue"],
170
+
171
+ alias:{
172
+
173
+ vue$:'vue/dist/vue.esm.js'
174
+
175
+ }
176
+
177
+ },
178
+
179
+ plugins:[
180
+
181
+ new VueLoaderPlugin(),
182
+
183
+ new ExtractTextPlugin('./public/signin/style.css')//dynamic
184
+
185
+ ]
186
+
187
+ };
188
+
189
+ ```
190
+
117
191
  flash.vue
118
192
 
119
193
  ```vue
@@ -182,6 +256,124 @@
182
256
 
183
257
  ```
184
258
 
259
+ 3回目のエラー
260
+
261
+ ```
262
+
263
+ Hash: 436ab506b9718a58f0e5
264
+
265
+ Version: webpack 4.29.4
266
+
267
+ Time: 12045ms
268
+
269
+ Built at: 2019-02-23 13:42:12
270
+
271
+ Asset Size Chunks Chunk Names
272
+
273
+ bundle.js 363 KiB main [emitted] main
274
+
275
+ Entrypoint main = bundle.js
276
+
277
+ [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
278
+
279
+ [./public/signin/app.js] 192 bytes {main} [built]
280
+
281
+ + 12 hidden modules
282
+
283
+
284
+
285
+ 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&)
286
+
287
+ Module build failed (from ./node_modules/extract-text-webpack-plugin/dist/loader.js):
288
+
289
+ ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
290
+
291
+ Error: Cannot find module 'node-sass'
292
+
293
+ at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
294
+
295
+ at Function.Module._load (internal/modules/cjs/loader.js:507:25)
296
+
297
+ at Module.require (internal/modules/cjs/loader.js:637:17)
298
+
299
+ at require (C:\settask\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
300
+
301
+ at Object.sassLoader (C:\settask\node_modules\sass-loader\lib\loader.js:46:72)
302
+
303
+ at runLoaders (C:\settask\node_modules\webpack\lib\NormalModule.js:301:20)
304
+
305
+ at C:\settask\node_modules\loader-runner\lib\LoaderRunner.js:367:11
306
+
307
+ at C:\settask\node_modules\loader-runner\lib\LoaderRunner.js:233:18
308
+
309
+ at runSyncOrAsync (C:\settask\node_modules\loader-runner\lib\LoaderRunner.js:143:3)
310
+
311
+ at iterateNormalLoaders (C:\settask\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
312
+
313
+ at iterateNormalLoaders (C:\settask\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
314
+
315
+ at C:\settask\node_modules\loader-runner\lib\LoaderRunner.js:236:3
316
+
317
+ at Object.context.callback (C:\settask\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
318
+
319
+ at selectBlock (C:\settask\node_modules\vue-loader\lib\select.js:39:19)
320
+
321
+ at Object.module.exports (C:\settask\node_modules\vue-loader\lib\index.js:79:12)
322
+
323
+ @ ./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&)
324
+
325
+
326
+
327
+ 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&)
328
+
329
+ Module build failed (from ./node_modules/sass-loader/lib/loader.js):
330
+
331
+ Error: Cannot find module 'node-sass'
332
+
333
+ at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
334
+
335
+ at Function.Module._load (internal/modules/cjs/loader.js:507:25)
336
+
337
+ at Module.require (internal/modules/cjs/loader.js:637:17)
338
+
339
+ at require (C:\settask\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
340
+
341
+ at Object.sassLoader (C:\settask\node_modules\sass-loader\lib\loader.js:46:72)
342
+
343
+ @ ./public/signin/components/flash.vue?vue&type=style&index=0&id=84500228&scoped=true&lang=scss& 1:0-279
344
+
345
+ 1:295-298 1:300-576 1:300-576
346
+
347
+ @ ./public/signin/components/flash.vue
348
+
349
+ @ ./public/signin/app.js
350
+
351
+ 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&:
352
+
353
+ Entrypoint undefined = extract-text-webpack-plugin-output-filename
354
+
355
+ 1 module
356
+
357
+
358
+
359
+ 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&)
360
+
361
+ Module build failed (from ./node_modules/sass-loader/lib/loader.js):
362
+
363
+ Error: Cannot find module 'node-sass'
364
+
365
+ at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
366
+
367
+ at Function.Module._load (internal/modules/cjs/loader.js:507:25)
368
+
369
+ at Module.require (internal/modules/cjs/loader.js:637:17)
370
+
371
+ at require (C:\settask\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
372
+
373
+ at Object.sassLoader (C:\settask\node_modules\sass-loader\lib\loader.js:46:72)
374
+
375
+ ```
376
+
185
377
  ## 実現したいこと
186
378
 
187
379
  バンドルできるようにしたいです

2

誤字

2019/02/23 04:51

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -154,83 +154,31 @@
154
154
 
155
155
  2回目のエラー
156
156
 
157
- ```Javascript
158
-
159
- const VueLoaderPlugin = require('vue-loader/lib/plugin');
160
-
161
- const ExtractTextPlugin = require('extract-text-webpack-plugin');
162
-
163
-
164
-
165
- module.exports = {
166
-
167
- mode:"development",
168
-
169
- entry:"./public/signin/app.js",
170
-
171
- output:{
172
-
173
- filename:'bundle.js',
174
-
175
- path:__dirname+'/public/signin'
176
-
177
- },
178
-
179
- module:{
180
-
181
- rules:[
182
-
183
- {
184
-
185
- test: /.vue$/,
186
-
187
- exclude:/node_modules/,
188
-
189
- loader:'vue-loader',
190
-
191
- options:{
192
-
193
- loaders:{
194
-
195
- scss:ExtractTextPlugin.extract({
196
-
197
- use:'sass-loader',
198
-
199
- fallback:'vue-style-loader'
200
-
201
- })
202
-
203
- }
204
-
205
- }
206
-
207
- }
208
-
209
- ]
210
-
211
- },
212
-
213
- resolve:{
214
-
215
- extensions:[".js",".vue"],
216
-
217
- alias:{
218
-
219
- vue$:'vue/dist/vue.esm.js'
220
-
221
- }
222
-
223
- },
224
-
225
- plugins:[
226
-
227
- new VueLoaderPlugin(),
228
-
229
- new ExtractTextPlugin('./public/signin/style.css')
230
-
231
- ]
232
-
233
- };
157
+ ```
158
+
159
+ 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
160
+
161
+ Module parse failed: Unexpected character '#' (10:0)
162
+
163
+ You may need an appropriate loader to handle this file type.
164
+
165
+ |
166
+
167
+ |
168
+
169
+ > #flash-box {
170
+
171
+ | background-color: #ffdce0;
172
+
173
+ | color: #86181d;
174
+
175
+ @ ./public/signin/components/flash.vue?vue&type=style&index=0&id=84500228&scoped=true&lang=scss& 1:0-156
176
+
177
+ 1:172-175 1:177-330 1:177-330
178
+
179
+ @ ./public/signin/components/flash.vue
180
+
181
+ @ ./public/signin/app.js
234
182
 
235
183
  ```
236
184
 

1

2回目のエラーとvueファイルを追加しました

2019/02/20 10:53

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -46,13 +46,13 @@
46
46
 
47
47
  mode:"development",
48
48
 
49
- entry:"./public/signin/app.js",//dynamic
49
+ entry:"./public/signin/app.js",
50
50
 
51
51
  output:{
52
52
 
53
53
  filename:'bundle.js',
54
54
 
55
- path:__dirname+'/public/signin'//dynamic
55
+ path:__dirname+'/public/signin'
56
56
 
57
57
  },
58
58
 
@@ -106,7 +106,7 @@
106
106
 
107
107
  new VueLoaderPlugin(),
108
108
 
109
- new ExtractTextPlugin('./public/signin/style.css')//dynamic
109
+ new ExtractTextPlugin('./public/signin/style.css')
110
110
 
111
111
  ]
112
112
 
@@ -114,6 +114,126 @@
114
114
 
115
115
  ```
116
116
 
117
+ flash.vue
118
+
119
+ ```vue
120
+
121
+ <template>
122
+
123
+ <div id="flash-box">
124
+
125
+ <p>パスワード,もしくはユーザー名が間違っています</p>
126
+
127
+ </div>
128
+
129
+ </template>
130
+
131
+ <script>
132
+
133
+ export default {};
134
+
135
+ </script>
136
+
137
+ <style scoped lang="scss">
138
+
139
+ #flash-box {
140
+
141
+ background-color: #ffdce0;
142
+
143
+ color: #86181d;
144
+
145
+ padding:15px 20px;
146
+
147
+ border-radius: 3px;
148
+
149
+ }
150
+
151
+ </style>
152
+
153
+ ```
154
+
155
+ 2回目のエラー
156
+
157
+ ```Javascript
158
+
159
+ const VueLoaderPlugin = require('vue-loader/lib/plugin');
160
+
161
+ const ExtractTextPlugin = require('extract-text-webpack-plugin');
162
+
163
+
164
+
165
+ module.exports = {
166
+
167
+ mode:"development",
168
+
169
+ entry:"./public/signin/app.js",
170
+
171
+ output:{
172
+
173
+ filename:'bundle.js',
174
+
175
+ path:__dirname+'/public/signin'
176
+
177
+ },
178
+
179
+ module:{
180
+
181
+ rules:[
182
+
183
+ {
184
+
185
+ test: /.vue$/,
186
+
187
+ exclude:/node_modules/,
188
+
189
+ loader:'vue-loader',
190
+
191
+ options:{
192
+
193
+ loaders:{
194
+
195
+ scss:ExtractTextPlugin.extract({
196
+
197
+ use:'sass-loader',
198
+
199
+ fallback:'vue-style-loader'
200
+
201
+ })
202
+
203
+ }
204
+
205
+ }
206
+
207
+ }
208
+
209
+ ]
210
+
211
+ },
212
+
213
+ resolve:{
214
+
215
+ extensions:[".js",".vue"],
216
+
217
+ alias:{
218
+
219
+ vue$:'vue/dist/vue.esm.js'
220
+
221
+ }
222
+
223
+ },
224
+
225
+ plugins:[
226
+
227
+ new VueLoaderPlugin(),
228
+
229
+ new ExtractTextPlugin('./public/signin/style.css')
230
+
231
+ ]
232
+
233
+ };
234
+
235
+ ```
236
+
117
237
  ## 実現したいこと
118
238
 
119
239
  バンドルできるようにしたいです