質問編集履歴
2
普通なら「Watching...」と出る箇所が「Working on it...」のままコンパイルされない状態です。Liveは利用できる状態です。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
vscodeのLive Sassを使ってローカルでサイトのトップページを作っていたところ、作業途中で突然sassがコンパイルしなくなりました。
|
|
4
4
|
|
|
5
|
+
普通なら「Watching...」と出る箇所が「Working on it...」のままコンパイルされない状態です。Liveは利用できる状態です。
|
|
6
|
+
|
|
5
7
|
### 発生している問題・エラーメッセージ
|
|
6
8
|
|
|
7
9
|
```
|
1
live sass compilerがおかしいと感じたのでsettings.jsonのコードを追記しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -23,4 +23,114 @@
|
|
|
23
23
|
|
|
24
24
|
進行中の案件もあるので早めに解決したいと思い、こちらで質問させていただきました。
|
|
25
25
|
|
|
26
|
-
新卒1年目のコーダーです。お手数おかけしますがご回答の程お願いいたします。
|
|
26
|
+
新卒1年目のコーダーです。お手数おかけしますがご回答の程お願いいたします。
|
|
27
|
+
|
|
28
|
+
### 追記
|
|
29
|
+
|
|
30
|
+
line sassの設定→ワークスペース→settings.jsonに記入しているコードを共有いたします。
|
|
31
|
+
```{
|
|
32
|
+
// VSCodeワークスペースルートフォルダ
|
|
33
|
+
"folders": [
|
|
34
|
+
{
|
|
35
|
+
"path": "."
|
|
36
|
+
}
|
|
37
|
+
],
|
|
38
|
+
// VSCodeワークスペース用各種設定
|
|
39
|
+
"settings": {
|
|
40
|
+
// Sass用設定を追記
|
|
41
|
+
// Sassのコンパイルによる出力設定
|
|
42
|
+
"liveSassCompile.settings.formats": [
|
|
43
|
+
{
|
|
44
|
+
"format": "expanded", // 「nested」「compact」「compressed」から選択
|
|
45
|
+
"extensionName": ".css", // 拡張子「.css」として出力
|
|
46
|
+
"savePath": null // 別フォルダに出力する場合は文字列で指定
|
|
47
|
+
}
|
|
48
|
+
],
|
|
49
|
+
// Sassのコンパイル監視対象外とするフォルダを指定
|
|
50
|
+
"liveSassCompile.settings.excludeList": [
|
|
51
|
+
"**/node_modules/**",
|
|
52
|
+
".vscode/**",
|
|
53
|
+
".history/**"
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
ユーザーのsettings.jsonは下記のとおりです。
|
|
59
|
+
```{
|
|
60
|
+
"workbench.iconTheme": "vscode-icons",
|
|
61
|
+
"diffEditor.renderSideBySide": false, // Git の差分を行内に表示
|
|
62
|
+
"editor.colorDecorators": false, // カラーデコレーターを非表示
|
|
63
|
+
"editor.formatOnPaste": true, // ファイル保存時に自動でフォーマット
|
|
64
|
+
"editor.formatOnType": true, // 入力した行を自動でフォーマット
|
|
65
|
+
"editor.hover.enabled": false, // ホバーしたときに出る解説を消す
|
|
66
|
+
"editor.minimap.renderCharacters": false, // ミニマップの表示文字をブロックに変更
|
|
67
|
+
"editor.minimap.showSlider": "always", // 表示領域をミニマップで常にハイライト
|
|
68
|
+
"editor.multiCursorModifier": "ctrlCmd", // マウスでの複数選択時の修飾キーを変更
|
|
69
|
+
"editor.renderControlCharacters": true, // 制御文字を表示
|
|
70
|
+
"editor.renderLineHighlight": "all", // 選択行を行番号含めすべてハイライト
|
|
71
|
+
"editor.renderWhitespace": "all", // 半角スペースを常に表示
|
|
72
|
+
"editor.snippetSuggestions": "top", // Emmet などのスニペット候補を優先して表示
|
|
73
|
+
"editor.tabSize": 2, // タブのサイズ変更
|
|
74
|
+
"editor.wordWrap": "on", // エディターの幅で折り返し
|
|
75
|
+
"emmet.showSuggestionsAsSnippets": true, // Emmet の候補を表示
|
|
76
|
+
"emmet.triggerExpansionOnTab": true, // TAB キーで Emmet を展開できるようにする
|
|
77
|
+
"emmet.variables": { // Emmet で展開される HTML の言語を変更
|
|
78
|
+
"lang": "ja"
|
|
79
|
+
},
|
|
80
|
+
"explorer.confirmDelete": false, // ファイル削除時の確認を表示しない
|
|
81
|
+
"files.associations": {
|
|
82
|
+
".*lintrc": "json",
|
|
83
|
+
"*.scss": "css"
|
|
84
|
+
},
|
|
85
|
+
"files.exclude": { // エクスプローラーから非表示にするファイル
|
|
86
|
+
"**/*.map": true,
|
|
87
|
+
"**/node_modules": true
|
|
88
|
+
},
|
|
89
|
+
"files.insertFinalNewline": true, // ファイルの保存時に末尾を改行
|
|
90
|
+
"files.trimFinalNewlines": true, // ファイルの保存時に最終行以降をトリミング
|
|
91
|
+
"files.trimTrailingWhitespace": true, // ファイルの保存時に行末の空白をトリミング
|
|
92
|
+
"[markdown]": {
|
|
93
|
+
"files.trimTrailingWhitespace": false // Markdown のファイルは行末の空白をトリミングしない
|
|
94
|
+
},
|
|
95
|
+
"html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, p", // タグ内の記述はフォーマットしない
|
|
96
|
+
"html.format.extraLiners": "", // head, body, /html タグの前に改行を入れない
|
|
97
|
+
"html.format.unformatted": null, // フレージング・コンテンツ（旧インライン要素のようなタグ）はフォーマットしない
|
|
98
|
+
"html.format.wrapLineLength": 0, // 行の文字数制限を無くし自動で改行させない
|
|
99
|
+
"search.exclude": { // 検索対象外にするファイル設定（ files.exclude のファイルも含む）
|
|
100
|
+
"**/tmp": true
|
|
101
|
+
},
|
|
102
|
+
"window.openFoldersInNewWindow": "on", // 新規ワークスペースを別ウインドウで開く
|
|
103
|
+
"window.title": "${activeEditorMedium}${separator}${rootName}", // ウインドウ上部に表示する文字列の設定
|
|
104
|
+
"workbench.editor.labelFormat": "short", // タブに表示する文字列の設定
|
|
105
|
+
"workbench.editor.tabSizing": "shrink", // タブの表示設定
|
|
106
|
+
"workbench.startupEditor": "none",
|
|
107
|
+
"window.zoomLevel": 0,
|
|
108
|
+
"color-highlight.markerType": "outline",
|
|
109
|
+
"liveServer.settings.donotShowInfoMsg": true // Welcome Page を表示しない
|
|
110
|
+
CSScomb
|
|
111
|
+
"csscomb.formatOnSave": true,
|
|
112
|
+
"csscomb.preset": "~/.vscode/mycsscomb.json",
|
|
113
|
+
"csscomb.syntaxAssociations": {
|
|
114
|
+
"postcss": "css"
|
|
115
|
+
}
|
|
116
|
+
"liveSassCompile.settings.formats": [ //Sassの出力内容の設定
|
|
117
|
+
{
|
|
118
|
+
"format": "expanded", //nested、compact、compressedのどれかを選ぶ
|
|
119
|
+
"extensionName": ".css", //style.cssとして出力
|
|
120
|
+
"savePath": "/css" //cssフォルダの中にstyle.cssを出力
|
|
121
|
+
}
|
|
122
|
+
],
|
|
123
|
+
"liveSassCompile.settings.excludeList": [ //対象外とするフォルダを指定
|
|
124
|
+
"**/node_modules/**",
|
|
125
|
+
".vscode/**",
|
|
126
|
+
".history/**"
|
|
127
|
+
],
|
|
128
|
+
"liveSassCompile.settings.autoprefix": [ //ベンダープレフィックスの指定
|
|
129
|
+
"last 2 versions",
|
|
130
|
+
"ie >= 11",
|
|
131
|
+
"Android >= 4",
|
|
132
|
+
"ios_saf >= 8"
|
|
133
|
+
]
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
```
|