質問: scssファイルの読み込みが上手くいきません。 index.htmlでfront-page.cssを読み込んでいます。 front-page.cssではパーシャルの_base.scssと_config.scssを読み込んでいます。 しかし、_base.scssの内容も_base.scss内での_config.scssの内容も読み込まれていません。 _config.scssで用意した変数を_base.scssで使い、_base.scssをfront-page.cssで読み込んで index.htmlに反映させたいのですが上手く行きません。 SCSSを使うのは始めてで、記述に問題があるのか、コンパイルに問題があるのかわかりません。 ご教示頂けますと幸いです。 【index.html】 ` Document テストテスト ` 【front-page.css】 `@import "base.scss"; @import "config.scss";` 【_base.scss】 `@import "config.scss";` `body{` `margin:0;` `padding:0;` `font-family: 'Noto Sans JP', sans-serif;` `color:$txt-color;` `}` `img{` `height:auto;` `max-width:100%;` `}` `a{` `text-decoration: none;` `}` `ul{ list-style:none; }` 【_config.scss】 `$txt-color: #0A2B48;` `$btn-color: #EC6D64;`
回答: `@import`で`url()`を使わずにパーシャル化したファイル名を指定するのはSCSSの機能なので、`front-page.css`も`front-page.scss`にしてコンパイルしてください。 以下のように、パーシャル化したファイルは、先頭の_を取り、末尾の「.scss」も省略した値を指定します。 font-page.scss ``` @import "base"; @import "config"; ``` _base.scss ``` @import "config"; (以下略) ```