前提・実現したいこと
vscodeのLive Sassを使ってローカルでサイトのトップページを作っていたところ、作業途中で突然sassがコンパイルしなくなりました。
普通なら「Watching...」と出る箇所が「Working on it...」のままコンパイルされない状態です。Liveは利用できる状態です。
発生している問題・エラーメッセージ
Compiling Sass/Scss Files:
c:\Users\a_aaaaaa\Desktop\フォルダ\.案件\会社名\css\style.scss
上記でストップして読み込んでくれません。
試したこと
live sassのアンインストールとインストールをやってみると、逆にvscodeが.scssを認識しなくなりました(style.scss.cssと勝手にcss認識される)
補足情報(FW/ツールのバージョンなど)
右下に「利用可能な更新プログラムがあります:Visual Studio code 1.53.2」とお知らせが来てるので、これをインストールすればなんとかなるのかなと思いました。
しかし会社用のパソコンで、インストールするためにも上の人たちにインストール申請しなきゃならないので3日後にしかインストールできません。
進行中の案件もあるので早めに解決したいと思い、こちらで質問させていただきました。
新卒1年目のコーダーです。お手数おかけしますがご回答の程お願いいたします。
追記
line sassの設定→ワークスペース→settings.jsonに記入しているコードを共有いたします。
// VSCodeワークスペースルートフォルダ
"folders": [
{
"path": "."
}
],
// VSCodeワークスペース用各種設定
"settings": {
// Sass用設定を追記
// Sassのコンパイルによる出力設定
"liveSassCompile.settings.formats": [
{
"format": "expanded", // 「nested」「compact」「compressed」から選択
"extensionName": ".css", // 拡張子「.css」として出力
"savePath": null // 別フォルダに出力する場合は文字列で指定
}
],
// Sassのコンパイル監視対象外とするフォルダを指定
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**",
".history/**"
]
}
}
ユーザーのsettings.jsonは下記のとおりです。
"workbench.iconTheme": "vscode-icons",
"diffEditor.renderSideBySide": false, // Git の差分を行内に表示
"editor.colorDecorators": false, // カラーデコレーターを非表示
"editor.formatOnPaste": true, // ファイル保存時に自動でフォーマット
"editor.formatOnType": true, // 入力した行を自動でフォーマット
"editor.hover.enabled": false, // ホバーしたときに出る解説を消す
"editor.minimap.renderCharacters": false, // ミニマップの表示文字をブロックに変更
"editor.minimap.showSlider": "always", // 表示領域をミニマップで常にハイライト
"editor.multiCursorModifier": "ctrlCmd", // マウスでの複数選択時の修飾キーを変更
"editor.renderControlCharacters": true, // 制御文字を表示
"editor.renderLineHighlight": "all", // 選択行を行番号含めすべてハイライト
"editor.renderWhitespace": "all", // 半角スペースを常に表示
"editor.snippetSuggestions": "top", // Emmet などのスニペット候補を優先して表示
"editor.tabSize": 2, // タブのサイズ変更
"editor.wordWrap": "on", // エディターの幅で折り返し
"emmet.showSuggestionsAsSnippets": true, // Emmet の候補を表示
"emmet.triggerExpansionOnTab": true, // TAB キーで Emmet を展開できるようにする
"emmet.variables": { // Emmet で展開される HTML の言語を変更
"lang": "ja"
},
"explorer.confirmDelete": false, // ファイル削除時の確認を表示しない
"files.associations": {
".*lintrc": "json",
"*.scss": "css"
},
"files.exclude": { // エクスプローラーから非表示にするファイル
"**/*.map": true,
"**/node_modules": true
},
"files.insertFinalNewline": true, // ファイルの保存時に末尾を改行
"files.trimFinalNewlines": true, // ファイルの保存時に最終行以降をトリミング
"files.trimTrailingWhitespace": true, // ファイルの保存時に行末の空白をトリミング
"[markdown]": {
"files.trimTrailingWhitespace": false // Markdown のファイルは行末の空白をトリミングしない
},
"html.format.contentUnformatted": "pre, code, textarea, title, h1, h2, h3, h4, h5, h6, p", // タグ内の記述はフォーマットしない
"html.format.extraLiners": "", // head, body, /html タグの前に改行を入れない
"html.format.unformatted": null, // フレージング・コンテンツ(旧インライン要素のようなタグ)はフォーマットしない
"html.format.wrapLineLength": 0, // 行の文字数制限を無くし自動で改行させない
"search.exclude": { // 検索対象外にするファイル設定( files.exclude のファイルも含む)
"**/tmp": true
},
"window.openFoldersInNewWindow": "on", // 新規ワークスペースを別ウインドウで開く
"window.title": "${activeEditorMedium}${separator}${rootName}", // ウインドウ上部に表示する文字列の設定
"workbench.editor.labelFormat": "short", // タブに表示する文字列の設定
"workbench.editor.tabSizing": "shrink", // タブの表示設定
"workbench.startupEditor": "none",
"window.zoomLevel": 0,
"color-highlight.markerType": "outline",
"liveServer.settings.donotShowInfoMsg": true // Welcome Page を表示しない
CSScomb
"csscomb.formatOnSave": true,
"csscomb.preset": "~/.vscode/mycsscomb.json",
"csscomb.syntaxAssociations": {
"postcss": "css"
}
"liveSassCompile.settings.formats": [ //Sassの出力内容の設定
{
"format": "expanded", //nested、compact、compressedのどれかを選ぶ
"extensionName": ".css", //style.cssとして出力
"savePath": "/css" //cssフォルダの中にstyle.cssを出力
}
],
"liveSassCompile.settings.excludeList": [ //対象外とするフォルダを指定
"**/node_modules/**",
".vscode/**",
".history/**"
],
"liveSassCompile.settings.autoprefix": [ //ベンダープレフィックスの指定
"last 2 versions",
"ie >= 11",
"Android >= 4",
"ios_saf >= 8"
]
}
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
まだ回答がついていません
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.13%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正の依頼
Daregada
2021/03/02 11:38
問題の在処をはっきりさせましょう。
たとえば、処理がストップしてしまう「style.scss」を別のフォルダーに待避させる(あるいはscss以外の適当な拡張子に変更する)などして、Live Sass Compilerの処理対象から外すと、残りのSCSSファイルが(もしあれば)正しくコンパイルされるのかを確認します。
正しくコンパイルされるのであれば、問題は「style.css」にあるのでしょうし、他のファイルでもストップしてしまうのなら、Live Sass Compiler自体に何か問題(設定ミスなど)があるかもしれません。
やみくもにアンインストールとインストールしたのでは、原因がはっきりしないまま解決したり、かえって別の問題が発生して解決がより難しくなります。すでにそうなっているようですが。
akiwaka
2021/03/02 12:35 編集
ご回答ありがとうございます。
scss自体読み込まなくなる前に、処理がストップしていた「style.scss」と別のscssを開いたら普通に動いていました。
しかしそこで問題の在処をはっきりしなかったせいでアンインストールし、scss自体が認識されなくなりました。
このことからLive Sass Compiler自体に問題があると思います。
Daregada
2021/03/02 12:55
とりあえず、ユーザーのsetteing.jsonに「,」が抜けていますね。
"csscomb.syntaxAssociations": {
"postcss": "css"
},
↑
akiwaka
2021/03/02 13:08
該当箇所の修正と、エラーも出てたので
CSS Combの削除
"liveServer.settings.donotShowInfoMsg": true, 「,」の追加
を行ってみました。
"liveServer.settings.donotShowInfoMsg": true, // Welcome Page を表示しない
"csscomb.formatOnSave": true,
"csscomb.preset": "~/.vscode/mycsscomb.json",
"csscomb.syntaxAssociations": {
"postcss": "css"
},