Whole system

Let's create src/frame/sample.html, src/page/index.html and 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() {
    }

}

Let's create src/css/app.css.

src/css/app.css

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

Let's take a look at distWork/page/index.html, after npm run watch_local is run.
src/css/app.css is merged.
Also, a file is created under distWork/css.
If you create app.css in distWork/css, it will be included in page.
So you don't have to load the external css file using the link tag.
It is a rule of this framework to create a file with the name app.css.

Page specific

Let's create src/page/index.html, src/js/modules/index.js, src/page/index2.html and 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() {
    }

}

Let's create src/css/index/app.css and 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;
}

Let's take a look at distWork/page/index.html and distWork/page/index2.html, npm run watch_local is run.
src/css/index/app.css and src/css/index2/app.css is merged.
Also, a file is created under distWork/css.
If app.css is created under src/css/index, css will be applied to the files under src/page/index and src/page/index.html.
If app.css is created under src/css/sub/index, css will be applied to the files under src/page/sub/index and src/page/sub/index.html.

Next page Different values for each environment

table of contents