teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

わかったことがあったので質問文を修正しました

2018/11/06 08:35

投稿

sugishio
sugishio

スコア47

title CHANGED
File without changes
body CHANGED
@@ -1,8 +1,11 @@
1
1
  [CSS を単一のファイルに抽出する](https://vue-loader-v14.vuejs.org/ja/configurations/extract-css.html)
2
2
  こちらを参考に`.vue`ファイル内のcssを外部ファイルに抽出したのですが、
3
+ vueコンポーネント内に記述したスタイルは`[name].css`内に書き出されておらず、
3
- まだ一部ファイルhtml埋め込まれた状態で書き出されていまいます。
4
+ ページでマウントされるコンポーネントのcssjsよって追加されているようです。
4
- ありうる原因として、何がありますでしょうか。。
5
5
 
6
+ - これはvue-loaderの正しい挙動なのでしょうか?
7
+ - `[name].css`内に書き出すにはどうしたら良いのでしょうか?
8
+
6
9
  ## Vesion
7
10
  - webpack: 3.10.0
8
11
  - vue-loader: 12.2.2
@@ -48,322 +51,4 @@
48
51
  new ExtractTextPlugin('[name].css'),
49
52
  ]
50
53
  }
51
- ```
52
-
53
- ## headタグ内に埋め込まれたままのcss(scss)
54
-
55
- ```scss
56
- .loading {
57
- display: flex;
58
- justify-content: center;
59
- align-items: center;
60
- width: 100%;
61
- height: 300px;
62
- img {
63
- width: 40px;
64
- height: 40px;
65
- }
66
- }
67
- .fade-enter-active, .fade-leave-active {
68
- transition: all 1s ease;
69
- }
70
- .fade-enter, .fade-leave-to {
71
- opacity: 0;
72
- }
73
- ```
74
-
75
- ```scss
76
- @import 'mixins';
77
-
78
- .weather {
79
- @extend %link-overlay;
80
- display: block;
81
- height: 50vw;
82
- max-height: 460px;
83
- background-image: url('/images/common/weather/bg/cloudy_sp.png');
84
- background-position: center center;
85
- background-size: cover;
86
- color: inherit;
87
-
88
- &.sunny {
89
- background-image: url('/images/common/weather/bg/sunny_sp.png');
90
- }
91
-
92
- &.rainy1 {
93
- background-image: url('/images/common/weather/bg/rainy1_sp.png');
94
- }
95
-
96
- &.rainy2 {
97
- background-image: url('/images/common/weather/bg/rainy2_sp.png');
98
- }
99
-
100
- &.snowy1 {
101
- background-image: url('/images/common/weather/bg/snowy1_sp.png');
102
- }
103
-
104
- &.snowy2 {
105
- background-image: url('/images/common/weather/bg/snowy2_sp.png');
106
- }
107
-
108
- &__container {
109
- display: flex;
110
- flex-direction: column;
111
- justify-content: space-between;
112
- height: 100%;
113
- padding: 1.5rem;
114
- flex-wrap: wrap;
115
- }
116
-
117
- &__area {
118
- font-size: 1.2rem;
119
- }
120
-
121
- &__date {
122
- font-size: 1rem;
123
- }
124
-
125
- &__linkText {
126
- display: block;
127
- text-align: right;
128
-
129
- a {
130
- color: inherit;
131
- font-size: 1rem;
132
- line-height: 1;
133
- }
134
- }
135
-
136
- &__list {
137
- display: flex;
138
- justify-content: space-between;
139
- }
140
- }
141
-
142
- .weather-detail {
143
- flex: 1;
144
-
145
- &:not(:first-child) {
146
- margin-left: 1rem;
147
- }
148
-
149
- &__title {
150
- margin-bottom: 1rem;
151
- font-size: 1.6rem;
152
- font-weight: normal;
153
- color: inherit;
154
- }
155
-
156
- &__body {
157
- display: flex;
158
- align-items: center;
159
- }
160
-
161
- &__icon {
162
- max-width: 100px;
163
- margin-left: -1.5rem;
164
-
165
- img {
166
- max-width: 100%;
167
- max-height: 100%;
168
- }
169
- }
170
-
171
- .temp {
172
- &::after {
173
- margin-left: .8rem;
174
- content: '℃';
175
- }
176
- }
177
-
178
- .temp-slash {
179
- margin: 0 .4rem;
180
- }
181
-
182
- .precip {
183
- &::after {
184
- margin-left: .4rem;
185
- content: '%';
186
- }
187
- }
188
- }
189
-
190
- .pc {
191
- .weather {
192
- height: 255px;
193
- background-image: url('/images/common/weather/bg/cloudy_pc.png');
194
-
195
- &.sunny {
196
- background-image: url('/images/common/weather/bg/sunny_pc.png');
197
- }
198
-
199
- &.rainy1 {
200
- background-image: url('/images/common/weather/bg/rainy1_pc.png');
201
- }
202
-
203
- &.rainy2 {
204
- background-image: url('/images/common/weather/bg/rainy2_pc.png');
205
- }
206
-
207
- &.snowy1 {
208
- background-image: url('/images/common/weather/bg/snowy1_pc.png');
209
- }
210
-
211
- &.snowy2 {
212
- background-image: url('/images/common/weather/bg/snowy2_pc.png');
213
- }
214
-
215
- &__container {
216
- padding: 2rem;
217
- }
218
-
219
- &__linkText a {
220
- font-size: 1.5rem;
221
- }
222
-
223
- &__area {
224
- font-size: 1.8rem;
225
- }
226
-
227
- &__date {
228
- font-size: 1.5rem;
229
- }
230
- }
231
-
232
- .weather-detail {
233
- width: 200px;
234
-
235
- &__icon {
236
- margin-left: -.5rem;
237
- }
238
- }
239
- }
240
- ```
241
-
242
- ```scss
243
- .list-item {
244
- box-sizing: border-box;
245
- position: relative;
246
- display: flex;
247
- align-items: center;
248
- width: 100%;
249
- min-height: 43px;
250
- padding: .5rem 1.5rem;
251
- color: #3c3c3c;
252
- background-color: white;
253
- border-bottom: 1px solid #cfcfcf;
254
- @include PC {
255
- min-height: 50px;
256
- }
257
- @extend %link-overlay;
258
- .list-item-content {
259
- display: flex;
260
- flex-wrap: wrap;
261
- justify-content: flex-start;
262
- align-items: center;
263
- align-content: center;
264
- width: 100%;
265
- min-height: calc(43px - 1rem);
266
- // IEのみテキストの位置がずれるため調整
267
- @media screen\0 {
268
- padding-top: .45rem;
269
- }
270
- .title {
271
- width: 100%;
272
- font-size: 13px;
273
- overflow: hidden;
274
- white-space: nowrap;
275
- text-overflow: ellipsis;
276
- @include PC {
277
- font-size: 15px;
278
- }
279
- }
280
- .badge-wrap {
281
- position: absolute;
282
- right: 2.0em;
283
- top: 50%;
284
- transform: translateY(-50%);
285
- }
286
- }
287
- }
288
-
289
- .list-item {
290
- .icon {
291
- width: 24px;
292
- font-size: 20px;
293
- text-align: center;
294
- }
295
- }
296
-
297
- // アイコン
298
- .list-item .icon {
299
- // デフォは非表示
300
- display: none;
301
- margin-right: .5em;
302
- }
303
- .list-item.garbage .icon {
304
- display: block;
305
- &::before {
306
- content: $fa-var-trash-o;
307
- }
308
- }
309
- .list-item.tenant_guide .icon {
310
- display: block;
311
- &::before {
312
- content: $fa-var-compass;
313
- }
314
- }
315
- .list-item.facility_manual .icon {
316
- display: block;
317
- &::before {
318
- content: $fa-var-wrench;
319
- }
320
- }
321
- .list-item.contract .icon {
322
- display: block;
323
- &::before {
324
- content: $fa-var-file-o;
325
- }
326
- }
327
- .list-item.leave_contact .icon {
328
- display: block;
329
- &::before {
330
- content: $fa-var-ban;
331
- }
332
- }
333
- .list-item.emergent_contact .icon {
334
- display: block;
335
- &::before {
336
- content: $fa-var-phone;
337
- }
338
- }
339
- .list-item.service_contact .icon {
340
- display: block;
341
- &::before {
342
- content: $fa-var-comment-o;
343
- }
344
- }
345
- .list-item.move_contact .icon {
346
- display: block;
347
- &::before {
348
- content: $fa-var-home;
349
- }
350
- }
351
- .list-item.report .icon {
352
- display: block;
353
- &::before {
354
- content: $fa-var-file-text-o;
355
- }
356
- }
357
- .list-item.help_category .icon {
358
- display: block;
359
- &::before {
360
- content: $fa-var-book;
361
- }
362
- }
363
- .list-item.support .icon {
364
- display: block;
365
- &::before {
366
- content: $fa-var-question-circle;
367
- }
368
- }
369
54
  ```

2

webpackの設定を追記しました

2018/11/06 08:35

投稿

sugishio
sugishio

スコア47

title CHANGED
File without changes
body CHANGED
@@ -8,6 +8,48 @@
8
8
  - vue-loader: 12.2.2
9
9
  - extract-text-webpack-plugin: 3.0.0
10
10
 
11
+ ## webpack設定(一部抜粋)
12
+
13
+ ```js
14
+ 'use strict';
15
+
16
+ const ExtractTextPlugin = require('extract-text-webpack-plugin');
17
+ module.exports = {
18
+ module: {
19
+ loaders: [
20
+ {
21
+ test: /.vue$/,
22
+ loader: 'vue-loader',
23
+ options: {
24
+ extractCSS: true,
25
+ loaders: {
26
+ js: 'babel-loader',
27
+ file: 'url-loader',
28
+ scss: 'vue-style-loader!css-loader?sourceMap!postcss-loader?sourceMap!resolve-url-loader?sourceMap!sass-loader?sourceMap',
29
+ sass: 'vue-style-loader!css-loader?sourceMap!postcss-loader?sourceMap!resolve-url-loader?sourceMap!sass-loader?sourceMap&indentedSyntax'
30
+ }
31
+ }
32
+ },
33
+ {
34
+ test: /.(scss|sass|css)$/i,
35
+ use: ExtractTextPlugin.extract({
36
+ fallback: 'style-loader',
37
+ use: [
38
+ { loader: 'css-loader' },
39
+ { loader: 'postcss-loader', options: { sourceMap: true } },
40
+ 'resolve-url-loader',
41
+ { loader: 'sass-loader', options: { sourceMap: true } }
42
+ ]
43
+ })
44
+ },
45
+ ]
46
+ },
47
+ plugins: [
48
+ new ExtractTextPlugin('[name].css'),
49
+ ]
50
+ }
51
+ ```
52
+
11
53
  ## headタグ内に埋め込まれたままのcss(scss)
12
54
 
13
55
  ```scss

1

タグが間違っていたので変更しました

2018/11/06 07:48

投稿

sugishio
sugishio

スコア47

title CHANGED
File without changes
body CHANGED
File without changes