0

現象
作成中のHPをVS CodeのLive Serverでプレビューとして見た。
CSSとSCSSが反映されない。

期待値
logo.svgをwidth: 120px;height: 40px;に設定したい。

再現手順

下記のコードをGoogle Chromeで実行する。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ポートフォリオサイト1</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <header class="header">
        <a href="index.html" class="header__profile-button"><img src="image/logo.svg" alt="プロフィール"></a>
        <nav class="header__breadcrumb-trail">
                <a href="" class="header__breadcrumb-trail">About</a>
                <a href="" class="header__breadcrumb-trail">Bicycle</a>
        </nav>
    </header>

<!-- 省略 -->

</body>
</html>

header.scss

.header {
    .header__profile_button {
            width: 120px;
            height: 40px;
    }
}

header.css(header.scssをコンパイルしたもの)

.header .header__profile_button {
  width: 120px;
  height: 40px;
}

下のURLのサイトを模写していました

https://code-step.com/demo/html/profile/

1 件の回答 1

2

基本的なことを確認しますが、
header.scssをコンパイルしてheader.cssは作れたのですか?

header.scss

.header {
    .header__profile_button {
            width: 120px;
            height: 40px;
    }
}

header.scssをコンパイルしてできたheader.css

.header .header__profile_button {
  width: 120px;
  height: 40px;
}
/*# sourceMappingURL=header.css.map */
1

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。