Q&A
質問と関係ないですけど全角で書くのやめませんか？
ｓｃｓｓって書いてあるより、
scssの方がスマートに見えません？
コード
はじめてｓｃｓｓを使おうとしています。ファイルを分割してｃｓｓを管理してみたいです。 しかし、スタイルが反映しません。 ### 発生している問題・エラーメッセージ Error: style.scss: 1:1 Error: Can't find stylesheet to import. ╷ 1 │ @use 'scss/top/top'; │ ^^^^^^^^^^^^^^^^^^^ ╵ Users/timers/Documents/クリスタ課題 上級編/cresta_third/css/style.scss 1:1 root stylesheet
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>クリスタ上級</title> 9 <link rel="preconnect" href="https://fonts.gstatic.com"> 10 <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=+JP:wght@400;700&display=swap" rel="stylesheet"> 11 12 <link rel="stylesheet" href="css/reset.css"> 13 <link rel="stylesheet" href="./css/style.css"> 14</head> 15 16<body> 17 <!-- header --> 18 <header class="header"> 19 <div class="header-inner"> 20<h1 class="header-title"><a href="index.html"><img src="images/site-logo.svg" alt=""></a></h1> 21<nav class="header-nav"> 22 <ul class="header-nav-list"> 23 <li class="header-nav-list-item"><a href="index.html"><img src="images/simbol-logo.svg" alt=""></a></li> 24 <li class="gnav-item"><a href="./about/">ABOUT US</a></li> 25 <li class="header-nav-list-item"><a href="#">WORKS</a></li> 26 <li class="header-nav-list-item"><a href="#">CULTURE</a></li> 27 <li class="header-nav-list-item"><a href="#">TOPICS</a></li> 28 <li class="header-nav-list-item"><a href="./contact/">CONTACT</a></li> 29 </ul> 30</nav> 31<!-- humburger --> 32<button class="menu-btn"> 33 <span class="bar bar-top"></span> 34 <span class="bar bar-mid"></span> 35 <span class="bar bar-bottom"></span> 36</button> 37<span class="menu">menu</span> 38 <!-- humburger --> 39 </div><!--header-inner--> 40</header> 41 42 <!-- mainここから --> 43 <main> 44 <!-- fv --> 45 <div class="fv"> 46 <div class="fv-copy"> 47 <p class="fv-copy-small">デザインで人を笑顔にする会社<br>DIGSMILE INC.</p> 48 <p class="fv-copy-large">DESIGN<br>FOR<br>SMILE.</p> 49 </div> 50 </div> 51 <!-- //fv --> 52 53<!-- ABOUT --> 54 <section class="section-wrapper"> 55 <div class="inner about-bg"> 56 <div class="about-content"> 57 <h2 class="section-title">ABOUT US</h2> 58 <p class="section-text">DIGSMILEは、デザインで人を笑顔にする会社。<br> 59 なんでもない日常に少しのワクワクと遊び心を提供します。笑顔には世界<br>を変える力がある、デザインには人を幸せにする力がある。毎日に幸せを<br>感じて生きていきたい。<br> 60 DIGSMILEの社名にはそんな想いが込められています。</p> 61 </div> 62 <a href="#" class="link-btn">READ MORE</a> 63 </div><!--inner about-bg--> 64 </section> 65 66 <!-- WORKSとCULTUREの箱 --> 67 <div class="l-section-wrapper"> 68 <div class="inner"> 69 <!-- WORKS --> 70 <setion class="s-section-wrapper"> 71 <h2 class="section-title">WORKS</h2> 72 <div class="imgframe"><img src="images/works-img@2x.jpg" alt=""></div> 73 <p class="section-text">DIGSMILEの制作実績を紹介します。</p> 74 <a href="./about/" class="link-btn">READ MORE</a> 75 </setion> 76 <!--CULTURE --> 77 <section class="s-section-wrapper"> 78 <h2 class="section-title">CULTURE</h2> 79 <div class="imgframe"><img src="images/culture-img@2x.jpg" alt=""></div> 80 <p class="section-text">DIGSMILEの社内文化について紹介します。</p> 81 <a href="#" class="link-btn">READ MORE</a> 82 </section> 83 </div><!--section-inner--> 84 </div><!--section-wrapper--> 85<!-- LATEST TOPICS --> 86<section class="section-wrapper"> 87 <div class="inner"> 88 <h2 class="section-title">LATEST TOPICS</h2> 89 <ul class="topics-list"> 90 <li class="topics-list-item"> 91 <a href="#"> 92 <time>2020.02.01</time> 93 <h3 class="topics-title">イベントレポート「VRクリエイター座談会 〜5Gの次に来るもの〜」</h3> 94 </a></li> 95 <li class="topics-list-item"> 96 <a href="#"> 97 <time>2020.01.18</time> 98 <h3 class="topics-title">プレスリリースのお知らせ DIGGIN’ RECORDS</h3> 99 </a></li> 100 <li class="topics-list-item"> 101 <a href="#"> 102 <time>2020.01.01</time> 103 <h3 class="topics-title">新年明けましておめでとうございます</h3> 104 </a></li> 105</ul> 106<a href="#" class="link-btn">READ MORE</a> 107 </div><!--section-inner--> 108</section> 109<section class="section-wrapper"> 110 <div class="inner"> 111 <div class="contact-content"> 112 <div class="imgframe"><img src="images/recruit-img@2x.jpg" alt=""></div> 113<h2 class="section-tile"><CONTACT/h2> 114<p class="section-text">制作の依頼、取材の依頼、IRや採用についての連絡・お問い合わせはコンタクトページから承っております。<br>まずはお気軽にご連絡ください。担当者から改めて返信いた<br>します。</p> 115<a href="./contact/" class="link-btn">READ MORE</a> 116 </div><!--contact-content--> 117 </div><!--section-inner--> 118</section> 119 120 </main> 121 <!-- //main --> 122 123 <!-- footer --> 124 <footer> 125 <small>©©2018 DIGSMILE INC.</small> 126 </footer> 127 <!-- //footer --> 128 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 129 130 <script src="js/script.js"></script> 131</body> 132 133</html>
css
1scss>top>_top.scss 2.header{ 3 background: pink; 4 height: 30px; 5}
css
1css>style.scss 2@use 'scss/top/top';
試したこと
パスの書き方を確認してみたのですが、、
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
回答1件
0
ベストアンサー
ファイルの指定パスが異なるかと思います。
css
1@use '../scss/top/top';
現状のままで使用する場合は、index.htmlと同じ階層に移動してれば良いと思います。
また、画像を見たところLive Sass Compilerをご使用かと思います。
こちら@useに対応しているか当方存じ上げません。
うまくコンパイルできないようでしたら@importで試してみたらいかがでしょうか。
参考にしていただけたらと思います。
投稿2021/04/22 07:19
総合スコア45
反映しました！相対パスの理解が足りないようで今一度勉強いたしました。DartJS Sass Compiler使ってます。＠useでいけました。ありがとうございました。
あなたの回答
tips
プレビュー
