sassの変更内容がcssに反映されない。

前提・実現したいこと

Live Sass Compiler で作成したcssをフォルダーにまとめてもsassの変更内容が反映されるようにしたいです。

発生している問題・エラーメッセージ

sassで作成したcssをフォルダーに入れてまとめるとsassの変更内容が反映されなかった。

↓の画像は、sassフォルダ内でLive Sass Compilerによって作成したcssとcss.mapをcssフォルダに移動した後の画像です。

該当のソースコード

エラーが表示されたソースコード↓

sass
1p{
2  color: rgb(255, 0, 212);
3  text-align: center;
4}

内容が反映されてないソースコード↓

css
1p {
2  color: #ff00d4;
3}
4/*# sourceMappingURL=sam.css.map */

文章のソースコード↓

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <link rel="stylesheet" href="sass/css/sam.css"> 
7
8  <title>チャレンジ</title>
9</head>
10
11<body>
12  
13  <div>
14    <p>Main Contents</p>
15    <p>下にスクロールすると、「TOP」ボタンが出てきます。</p>
16  </div>
17 
18</body>
19</html>

試したこと

Live Sass Compilerをアンインストールして、再びインストールしたが直らなかった。

補足情報（FW/ツールのバージョンなど）

PCは、Mac Air bookを使用
XAMPPを使用(7.3.26-1)
Visual Studio Codeを使用

Daregada

2021/02/18 13:09

> sassで作成したcssをフォルダーに入れてまとめるとsassの変更内容が反映されなかった。あなた以外の人にも分かるように書きましょう。 sassで書いたソースは、どのフォルダーにあるどんなファイル名のファイルか。フォルダーに入れてまとめるとは、どのフォルダーに入れたのか。入れたとは、具体的にはどんな操作をしたのか。まとめるとは(以下同様)。 VSCodeからLive sass compilerを有効な状態にしたのか、など。

sk8976

2021/04/05 12:25

Daregadaさん。修正のご連絡をいただき、ありがとうございました。質問内容を修正しました。返信が遅くなり申し訳ございません。

行動規範の内容に同意します

回答1件

ベストアンサー

Live Sass Compilerの設定画面でワークスペースの
setting json開き
{
"liveSassCompile.settings.autoprefix": [
"last 2 versions",
"ie >= 11",
"Android >= 4",
"ios_saf >= 8"
],
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
}
],
}
私の設定ですが、例えば、
style.scssでコード打つとstyle.cssにコンパイルされると思います。
試してみてください。

投稿2021/02/22 14:29

tomo-ya

総合スコア7

sk8976

2021/04/05 12:33

tomo-yaさん。ご回答いただき、ありがとうございます。 Live Sass Compiler の設定画面でワークスペースの setting json開いて、以下の内容を変更しました。 "liveSassCompile.settings.autoprefix": [ "last 2 versions" ], "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/css" } sassフォルダ内のcssフォルダにcssとcss.mapがコンパイルされるようになりました。

行動規範の内容に同意します