システム全体

src/frame/sample.html、src/page/index.html、src/js/modules/index.jsを作成しましょう

src/frame/sample.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
$page()
</body>
</html>

src/page/index.html

$frame(sample)
<div class="sample1">
    <div class="sample2">page</div>
</div>

src/js/modules/index.js

export class Index {

    constructor() {
    }

}

src/css/app.cssを作成しましょう

src/css/app.css

.sample1 {
  color: #ffffff;
  background-color: #ff0000;
  padding: 30px;
}
.sample2 {
  color: #ffffff;
  background-color: #0000ff;
}

npm run watch_localが実行されたらdistWork/page/index.htmlを見てみましょう
src/css/app.cssがマージされています
また、distWork/css配下にファイルができています
distWork/cssにapp.cssを作成すると、pageに組み込まれます
したがって、linkタグで外部cssファイルを読み込む必要はありません
app.cssという名前でファイルを作成するのはこのフレームワークの規則です

ページ固有

src/page/index.html、src/js/modules/index.js、src/page/index2.html、src/js/modules/index2.jsを作成しましょう

src/page/index.html

$frame(sample)
<div class="sample1">
    <div class="sample2">page</div>
</div>
<div class="sample3">
    <div class="sample4">index</div>
</div>

src/js/modules/index.js

export class Index {

    constructor() {
    }

}

src/page/index2.html

$frame(sample)
<div class="sample1">
    <div class="sample2">page</div>
</div>
<div class="sample3">
    <div class="sample4">index2</div>
</div>

src/js/modules/index2.js

export class Index2 {

    constructor() {
    }

}

src/css/index/app.css、src/css/index2/app.cssを作成しましょう

src/css/index/app.css

.sample3 {
  color: #ffffff;
  background-color: #000000;
  padding: 30px;
}
.sample4 {
  color: #ffffff;
  background-color: #006400;
}

src/css/index2/app.css

.sample3 {
  color: #ffffff;
  background-color: #ff8c00;
  padding: 30px;
}
.sample4 {
  color: #ffffff;
  background-color: #8a2be2;
}

npm run watch_localが実行されたらdistWork/page/index.html、distWork/page/index2.htmlを見てみましょう
src/css/index/app.css、src/css/index2/app.cssがマージされています
また、distWork/css配下にファイルができています
src/css/index配下にapp.cssを作成した場合は、src/page/index配下のファイルとsrc/page/index.htmlにcssが適用されます
src/css/sub/index配下にapp.cssを作成した場合は、src/page/sub/index配下のファイルとsrc/page/sub/index.htmlにcssが適用されます

次ページ環境ごとに異なる値

目次