Q&A
例で良いので、例えば、どのような入力を与えると、どのような結果を期待するのかを提示すると良いかと。
また、タグもscssなどを追加するとより適切な回答が得られやすくなるかもしれません。
前提・実現したいこと
scssファイルの一部（例えば長いコードのアニメーションの部分とか）をパーシャルで分割したいところです。
発生している問題・エラーメッセージ
ファイル名の前にアンダースコアを入れても、コンパイルされてしまいます。例えば「_animation.scss」とか「_menu.scss」などです。
該当のソースコード
試したこと
グーグルサーチやYoutube動画などいろいろ調べましたが情報がありませんでした。
補足情報（FW/ツールのバージョンなど）
OSは、マックOS BIG SUR です。
VS Code バージョンは1.53.2 で編集しております。
scssは学び始めたばかりですが、css ファイルが長くなりましたので、分割したいと思い、scssファイルをパーシャルでアンダースコアを前につけてファイルを保存しました。
しかしなぜかコンパイルされてしまい、.mapや.cssが必ずできてしまいます。
ネットでいろいろ調べているのですが、情報がなくて解決できません。初心者レベルの質問で大変恐縮ですが、どなたかご教授頂ければ幸いです。
どうぞよろしくお願いいたします。
--------------- 以下、追記になります。わかりづらくて申し訳ございませんでした。
サイト作成のため、html,css編集をしております。
以下のように、
cssフォルダ内にstyle.scssファイルがあり、それ一つで編集しておりましたので、.minや.map、.cssファイルがコンパイルされておりました。これが最初の状態です。
css /フォルダ
style.css
style.css.map
style.min
style.scss
scssファイルの行数が500行を超えて編集しずらくなりましたので、中でもタグの多いメニュー部分を分割しようと思い「_menu.scss」というファイルを新たに作り、style.scssファイル内からメニュー部分のタグを一括して_menu.scssに移して保存しました。
そうしましたら以下のようにコンパイルされてしまいました。
css /フォルダ
_menu.css
_menu.css.map
_menu.min
_menu.scss
style.css
style.css.map
style.min
style.scss
ネットでの参考サイトを見ますと、「_」アンダースコアをscssファイルの先頭につけるとコンパイルされないとありましたので、そのようにしましたが、なぜかコンパイルされてしまいます。
ちなみにscssファイルの先頭には「@charaset "utf-8";」は記載してありますし、移したタグもそのままの状態でコピーアンドペーストしました。
このような状態が質問の内容なのですが、ご理解いただけますでしょうか。もしまだ何か情報が足りないようでしたら、また追記させて頂きます。
どうぞよろしくお願いいたします。
--------------- 以下、2度目の追記になります。たびたび申し訳ございません。
style.scssファイルに_menu.scssを@importで読み込むようにしたいのです。つまり、
「@import "menu";」をstyle.scssの上部に記載して読み込み、style.cssに全てのcssが統合されればと考えております。
実際、その@importはうまくいっており、きちんと読み込みはできています。
ただ、_menu.scssがコンパイルされてしまって、 _menu.css、_menu.css.map、_menu.minが生成されてしまうのが問題なのです。
つまり、上記のファイル構造の繰り返しになりますが、
css /フォルダ
_menu.css
_menu.css.map
_menu.min
_menu.scss
style.css
style.css.map
style.min
style.scss
以上のようにならずに、以下のようになってくれたらと思っております。
css /フォルダ
_menu.scss
style.css
style.css.map
style.min
style.scss
このようにしたいと思っております。説明がうまくできなくて大変申し訳ございませんが、このご説明でよろしいでしょうか。もしまだご不明でしたらお知らせいただけましたら幸いです。
どうぞよろしくお願いいたします。
--------------- 以下、3度目の追記になります。たびたび申し訳ございません。
何度も申し訳ございません。アドバイス頂きましたとおり、@useを使いましたら、コードが読み込まれず、vs codeに「@use unknownAtRules」といったエラーが表示されます。
仕方なく再度@importにすると、ソースコードは無事コンパイルされてstyle.cssに記述されるのですが、前述の他の「_header.min.css」「_header.css」ファイルが生成されてしまいます。（前回はmenu.cssとしていましたが、わかりやすくするために「_header.css」にしました。）
以下がファイルになります。
---------以下がindex.htmlです
--上部略
<title>Document</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="header">
<h1>headerのタイトルです</h1>
</div>
<div class="main">
<h2>mainの見出しです</h2>
<p class="test_p">
パーシャルのテストです。パーシャルのテストです。パーシャルのテストです。パーシャルのテストです。パーシャルのテストです。パーシャルのテストです。パーシャルのテストです。
</p>
</div>
</body>
---------以下がcss/style.scssです
@charset "utf-8";
@import "header";
.main{
width: 500px;
height: 500px;
background-color: #ccc;
h2{
font-size: 16px;
font-weight: bold;
}
p{
font-size: 16px;
}
}
---------以下がcss/_header.scssです
@charset "utf-8";
.header{
width: 500px;
height: 100px;
background-color: yellow;
h1{
font-size: 30px;
font-weight: bold;
}
}
---------以下がcss/style.cssです
.header {
width: 500px;
height: 100px;
background-color: yellow;
}
.header h1 {
font-size: 30px;
font-weight: bold;
}
.main {
width: 500px;
height: 500px;
background-color: #ccc;
}
.main h2 {
font-size: 16px;
font-weight: bold;
}
.main p {
font-size: 16px;
}
/*# sourceMappingURL=style.css.map */
ブラウザ表示されたスクリーンショットはこちらです。
ファイル構造のスクリーンショットはこちらです
アドバイスいただきましたがvs codeについてもまだ始めたばかりで設定とかを見ましたがちょっと難解です。
初心者すぎて本当にご迷惑をおかけして申し訳ございませんがよろしくお願いいたします。
アドバイスありがとうございます。早速ですが、質問を編集させて頂きますのでよろしくお願いいたします。
結果どうなると良いのかがよくわかりません。style.scssが記載された内容だけをコンパイルしたいということでしょうか？その場合、style.scssには_menu.scssで記載された内容（変数など）を参照していないのでしょうか。
たびたび不備があり申し訳ございません。また追記させていただきます。
現状はわかりました。あなたが期待する結果はどのような結果を望むのかがわかりません。style.cssだけになれば良いのですか？その場合_menu.scssで記載した内容はどうなるのを望んでいるのですか？
元のstyle.scssにABと記載しており、コンパイルの結果、style.cssにA'B'となりました。今回style.scssにA、_menu.scssにBを記載し、コンパイルした結果、style.cssに期待するはA'なのかA'B'なのでしょうか。
たびたびすいません。アドバイスありがとうございます。コンパイルした結果に期待したいのは最後のほうのA'B'の方です。よろしくお願いいたします。
style.scssに＠importとか@useとか入れています？
はい。＠import "menu"; を入れています。
Visual Studio Codeにあるsccs関連の設定に問題があると思われますが、簡易的なコード（数行程度）で試して再現するのであれば、そのコードも提示された方が適切な回答が得られやすくなると思います。
ちなみに、@importは非推奨なので@useにした方が良いと思います
たびたび申し訳ございません。上記のとおり「3度目の追記」としてファイルなどの詳細とスクリーンショットを掲載させていただきました。何度もすいませんがアドバイスいただけましたら幸いです。よろしくお願いいたします。
コンパイラは何を使っていますか？
記述もれていました。すいません。Live Sass Compiler
ritwickdey.live-sass 3.0.0 となっています。
同じ拡張を入れていたので試してみましたが、再現しませんでした。
Live Sass Compiler のソースコードを少しだけ読んでみましたが、パーシャルファイルかどうかについて設定などを参照していないように読めました。
https://github.com/ritwickdey/vscode-live-sass-compiler/blob/3d2818d9053454affeab2e6fce4a7beb7c36cfb5/src/appModel.ts#L142
Lhankor_Mhy様 ご丁寧にご教授くださり、ありがとうございました。
やはり初心者すぎて私には理解できかねます。もしかしたらコンパイラのインストールとかの段階で、例えば何か別の競合するようなコンパイラを入れてしまったとか、そんなことが問題かもしれませんので、もう一度最初からインストールし直してやり直してみようと思います。
お忙しい中親身になって教えていただき、誠にありがとうございました。もっとお勉強してから出直すことにいたします。
あなたの回答
tips
プレビュー
