Q&A
ITCSS を用いてコーディングを行いたいのですが、CSS がHTML に反映されずに困っております。ITCSS に関する記事も少ないので苦戦しており、皆様のお力添えをいただきたいです。
ファイル構成
以下のようにしてます。
現状のコード
index.html
プロジェクト直下に配置しています。
html
1<!DOCTYPE html> 2<head> 3 <meta charset="UTF-8"> 4 <meta name="viewport" content="width=device-width, minimum-scale=1.0" /> 5 6 <title>ITCSS Primer</title> 7 8 <link rel="stylesheet" href="app.scss" /> 9 10</head> 11<body> 12 13 <button class="c-button">BUTTON!!!</button> 14 15</body> 16</html>
app.scss
記述したcssファイルはこちらで import してます。
css
1// settings 2@import "settings.colors"; 3@import "settings.fonts"; 4@import "settings.media"; 5@import "settings.shadow"; 6 7// tools 8@import "tools.main"; 9 10// generic 11@import "generic.reset"; 12 13// elements 14@import "elements.main"; 15 16// objects 17@import "objects.common-container"; 18 19// components 20@import "components.button.button-common"; 21 22// utilities 23@import "utilities.main";
import した scss ファイルは index.html に以下の形でインポートしてます。
ディベロッパーツールで読み込まれてる事は確認できてます。
html
1<link rel="stylesheet" href="app.scss" />
仮説
以下サイトの index.html を見ると
https://github.com/itcss/itcss-netmag
html
1 <link rel="stylesheet" href="css/main.css" />
main.css を読み込んでいました。
ですので, scss ではなく css ファイルに何かしら記述しないといけないと考え、中身を確認し、調べてみましたが、レイヤーないで記述したcss がどこで反映されてるのか掴めずに困っています。
自分のリサーチ不足、勉強不足な点はあると思いますが、一度皆様のお力添えをいただければと思います。
何卒よろしくお願いいたします。
回答1件
0
ベストアンサー
HTMLに適用できるのはあくまでもCSSなので、SCSSコードをコンパイルしてCSSコードを生成します。
コンパイル手段はいろいろありますので調べてみてください。
投稿2021/05/09 01:31
総合スコア8402
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/09 01:36