質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

Q&A

解決済

1回答

523閲覧

Live Sass CompileがコンパイルせずにCSSファイルを作成できない

chachanono

総合スコア6

Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

0グッド

0クリップ

投稿2024/05/09 22:25

編集2024/05/10 05:22

実現したいこと

Live Sass CompilerがコンパイルせずにCSSファイルをCSSフォルダへと作成したい

発生している問題・分からないこと

一度初期化したりと色々いじってしまってから使用できなくなりました。

エラーやsettings:jsonは下記の画像です。
イメージ説明

出力画面です。
イメージ説明

setting:jsonに表示されていたエラー?画像です。
イメージ説明

5/10の14:20更新(".vscode/" を "/.vscode/"  へと修正後 )
イメージ説明

エラーメッセージ

error

1Must start with a path separator (`/` or `\`) 2"autoprefix": Unknown word.(※5/10こちらは消えました)

該当のソースコード

settings:json

1{ 2"liveSassCompile.settings.formats": [ 3 { 4 "format": "expanded", // 出力されるCSSの形式。"expanded"は通常の読みやすい形式。"compressed"は圧縮された形式。 5 "extensionName": ".css", // 出力されるファイルの拡張子。通常は.css。 6 "savePath": "/css" // .scssファイルからの相対的な出力先のフォルダを指定。nullだと同階層、'/'はルートディレクトリを意味する。 7 } 8 ], 9 "liveSassCompile.settings.autoprefix": [ 10 "> 10%", // 全体のユーザーの10%以上が使用しているブラウザバージョンに対応 11 "last 2 versions" // 各ブラウザの最新2バージョンに対応 12 ], 13 "liveSassCompile.settings.excludeList": [ 14 ".vscode/**" // .vscodeフォルダ内のすべてのファイルやサブフォルダをコンパイルから除外 15 ], 16 "liveSassCompile.settings.generateMap": false, // ソースマップ(.map)ファイルの生成を無効にする。 17 "workbench.editor.untitled.hint": "hidden", // VS Codeの未命名エディタのヒントを非表示にする。 18 "liveSassCompile.settings.includeItems": [] // 特定のアイテムをコンパイルに含めるリスト。現在は空。 19}

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

Must start with a path separator (/ or \)
"autoprefix": Unknown word.

が出てCSSファイルが作成されません。

補足

settings:jsonの最新Ver.が何故か使用できないため1つ前のVer.を使用しています。

ブラウザはgoogleChroomのバージョン: 124.0.6367.119(Official Build) (64 ビット)
Live Sass Compileのバージョンはv6.1.1です。

参考サイトは下記になります。
https://shogo-log.com/live-sass-compiler/
下部のWatch Sassを押してもずっとwatchingのままでCSSファイルが作成されません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2024/05/10 01:48

『settings:jsonの最新Ver.』とはどういうものでしょうか。 なお、ご提示の settings.json を試してみましたが、"autoprefix": Unknown word. というエラーメッセージは出ませんでした。
chachanono

2024/05/10 04:58

settings:jsonの最新Ver.というのはLive Sass Compileの最新Ver.の間違いです。 なお更新して最新Verが出ました。 その際にsettings:jsonを確認しようとした際に新しいエラー?画像が確認できたのであげてみます。
Lhankor_Mhy

2024/05/10 05:12

質問の変更を拝読。 "autoprefix": Unknown word. のエラーは消えたのですね。よかったです。 Must start with a path separator (`/` or `\`) のエラーは読んでそのままの通りではないかと思います。.vscode/** ではなくて、最後のスクリーンショットの説明に書かれているパスに書き換えればエラーが消えるのではないでしょうか。
chachanono

2024/05/10 05:24

"liveSassCompile.settings.excludeList": [ "/.vscode/**" // .vscodeフォルダ内のすべてのファイルやサブフォルダをコンパイルから除外 ], へと変更しましたが、依然として別のエラーが残存しています。
chachanono

2024/05/10 05:36

恐らくエラー画像をUPしたExiteCodeと本命のファイルの方ともにCSSファイル作成できました。 ありがとうございました。 非常に助かりました!
guest

回答1

0

自己解決

"liveSassCompile.settings.excludeList": [
"/.vscode/**" // .vscodeフォルダ内のすべてのファイルやサブフォルダをコンパイルから除外

と変更しCSSファイル作成可能となりました。

投稿2024/05/10 05:37

chachanono

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問