質問編集履歴
3
修正いたしました
test
CHANGED
File without changes
|
test
CHANGED
@@ -12,6 +12,8 @@
|
|
12
12
|
|
13
13
|
![Roomフォルダー](6e2bbcc3997169c42b9124d557911bee.jpeg)
|
14
14
|
|
15
|
+
※style,cssはSCSSフォルダーに入れなおしています!!
|
16
|
+
|
15
17
|
上記がファイル構造です。
|
16
18
|
|
17
19
|
|
@@ -20,16 +22,24 @@
|
|
20
22
|
|
21
23
|
Q.それぞれのフォルダーRoomなどにCSS、SCSS、img jsフォルダーを置いています。
|
22
24
|
|
23
|
-
style.scssにheader.scssを保存すると
|
25
|
+
style.scssにheader.scssを保存するとsuccessできますが、style.cssがCSSに自動的に追加されません
|
24
26
|
|
25
27
|
|
26
28
|
|
27
29
|
解決したいこと
|
28
30
|
|
29
|
-
1style.css
|
31
|
+
1style.cssをコンパイルさせ。style.cssを自動的に作り、これを読み込みさせたい。
|
30
32
|
|
31
33
|
2.Homeページliをクリックしてもcannot getで表示されない。→表示させたい。
|
32
34
|
|
35
|
+
```エラー
|
36
|
+
|
37
|
+
Failed to load resource: the server responded with a status of 404 (Not Found)
|
38
|
+
|
39
|
+
By Google develop
|
40
|
+
|
41
|
+
```
|
42
|
+
|
33
43
|
(一方で、フォルダーからroom.htmlをクリックするとCSS反映されてないページが表示されます。)
|
34
44
|
|
35
45
|
|
@@ -336,15 +346,15 @@
|
|
336
346
|
|
337
347
|
```style.scss
|
338
348
|
|
339
|
-
@import ".
|
349
|
+
@import "./Room/Scss/foundation/base";
|
340
|
-
|
350
|
+
|
341
|
-
@import ".
|
351
|
+
@import "./Room/Scss/foundation/general";
|
342
|
-
|
352
|
+
|
343
|
-
@import ".
|
353
|
+
@import "./Room/Scss/foundation/mixin";
|
344
|
-
|
354
|
+
|
345
|
-
@import ".
|
355
|
+
@import "./Room/Scss/layout/header";
|
346
|
-
|
356
|
+
|
347
|
-
@import ".
|
357
|
+
@import "./Room/Scss/layout/footer";
|
348
358
|
|
349
359
|
```
|
350
360
|
|
2
修正いたしました
test
CHANGED
File without changes
|
test
CHANGED
@@ -34,7 +34,87 @@
|
|
34
34
|
|
35
35
|
|
36
36
|
|
37
|
-
|
37
|
+
live saas.lsonは↓
|
38
|
+
|
39
|
+
```json
|
40
|
+
|
41
|
+
|
42
|
+
|
43
|
+
{
|
44
|
+
|
45
|
+
//IDやクラス名が閉じタグの後ろにコメントとして自動挿入
|
46
|
+
|
47
|
+
"emmet.syntaxProfiles": {
|
48
|
+
|
49
|
+
"html": {
|
50
|
+
|
51
|
+
"filters": "html,c"
|
52
|
+
|
53
|
+
}
|
54
|
+
|
55
|
+
},
|
56
|
+
|
57
|
+
"emmet.preferences": {
|
58
|
+
|
59
|
+
"filter.commentAfter": "<!-- /[#ID][.CLASS] -->"
|
60
|
+
|
61
|
+
},
|
62
|
+
|
63
|
+
|
64
|
+
|
65
|
+
"liveSassCompile.settings.formats": [
|
66
|
+
|
67
|
+
|
68
|
+
|
69
|
+
//Sassの出力内容の設定
|
70
|
+
|
71
|
+
{
|
72
|
+
|
73
|
+
"format": "expanded", //nested、compact、compressedのどれかを選ぶ
|
74
|
+
|
75
|
+
"extensionName": ".css", //style.cssとして出力
|
76
|
+
|
77
|
+
"savePath": "/css" //cssフォルダの中にstyle.cssを出力
|
78
|
+
|
79
|
+
}
|
80
|
+
|
81
|
+
],
|
82
|
+
|
83
|
+
"liveSassCompile.settings.excludeList": [ //対象外とするフォルダを指定
|
84
|
+
|
85
|
+
"**/node_modules/**",
|
86
|
+
|
87
|
+
".vscode/**",
|
88
|
+
|
89
|
+
".history/**"
|
90
|
+
|
91
|
+
],
|
92
|
+
|
93
|
+
"liveSassCompile.settings.autoprefix": [ //ベンダープレフィックスの指定
|
94
|
+
|
95
|
+
"last 2 versions",
|
96
|
+
|
97
|
+
"ie >= 11",
|
98
|
+
|
99
|
+
"Android >= 4",
|
100
|
+
|
101
|
+
"ios_saf >= 8"
|
102
|
+
|
103
|
+
],
|
104
|
+
|
105
|
+
"workbench.colorTheme": "Quiet Light",
|
106
|
+
|
107
|
+
"liveServer.settings.donotShowInfoMsg": true
|
108
|
+
|
109
|
+
|
110
|
+
|
111
|
+
}
|
112
|
+
|
113
|
+
|
114
|
+
|
115
|
+
|
116
|
+
|
117
|
+
```
|
38
118
|
|
39
119
|
|
40
120
|
|
1
修正いたしました
test
CHANGED
File without changes
|
test
CHANGED
File without changes
|