投稿2021/03/02 01:40
編集2021/03/02 05:26vscodeの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認識される）
右下に「利用可能な更新プログラムがあります: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" ] }
あなたの回答
tips
プレビュー
Q&A
