■現在の状態
ウェブシステムで、各ユーザーがお好みのテーマを設定しています。テーマの数だけCSSを用意し、設定値によって読み込むCSSを切り替えております。
CSSの中身は、先頭に記載した変数宣言部の設定値が異なるのみで、後は全く同じです。
Visual Studio 2019 で SCSS を記述しています。
【テーマA】themeA.scss
scss
1$COLOR-01:#000000; 2 3body{ 4 color:$COLOR-01; 5}
【テーマB】themeB.scss
scss
1$COLOR-01:#FFFFFF; 2 3body{ 4 color:$COLOR-01; 5}
body{} 部分は全CSSファイル同じなのでこの部分を共通化したいと考えました。
■試してみたこと
以下の5ファイルを作成しました
_common.scss
scss
1body{ 2 color:$COLOR-01; 3}
_themeAbase.scss
scss
1$COLOR-01:#000000;
_themeBbase.scss
scss
1$COLOR-01:#FFFFFF;
themeA.scss
scss
1@import "themeAbase"; 2@import "common";
themeB.scss
scss
1@import "themeBbase"; 2@import "common";
これでコンパイルすればCSSがうまく生成されます。しかしながら「_common.scss」には変数の宣言もなく、@import の記述もないので、Visual Studio 上は、エラー「宣言されていない変数」が出てきます。このようなエラーが残っていると、本当のエラーと見分けがつかない為、何とか解消したいと思っておりますが、変数宣言部以外をうまく共通ファイル化する事は可能なのでしょうか?
どうぞよろしくお願い致します。
あなたの回答
tips
プレビュー