Project Structure
Spear has some project structure rules.
Basic
By default, spear wizard will create the following structures:
├── package.json
├── spear.config.mjs
└── src
├── articles
│ ├── [alias].html
│ └── index.html
├── assets
│ ├── css
│ │ └── main.scss
│ ├── fonts
│ │ └── OpenSans-Regular.ttf
│ └── js
│ └── main.js
├── components
│ └── main-component.spear
├── images
│ └── logo.png
└── index.html
The files and directories which has rule is the following:
Name | Description |
---|---|
package.json | npm package settings |
spear.config.mjs | spear settings. Install guid explain this file. |
src | The source directory. You can change this source directory by changing the spear.config.mjs |
src/components | The components directory. Component describe about this directory for detail. |
There are not regulation for other files and directories.
Refer to resources
Spear will create generated HTML to dist
directory as is src directory. So we don't care the refer string.
For example, If index.html refer the ./images/logo.png
, generated index.html can refer same path since dist directory has images/logo.png
- source directory
└── src
├── articles
│ ├── [alias].html
│ └── index.html
├── assets
│ ├── css
│ │ └── main.scss
│ ├── fonts
│ │ └── OpenSans-Regular.ttf
│ └── js
│ └── main.js
├── components
│ └── main-component.spear
├── images
│ └── logo.png
└── index.html
- generated directory
└── dist
├── articles
│ ├── blog-post1.html
│ ├── blog-post2.html
│ └── index.html
├── assets
│ ├── css
│ │ └── main.css
│ ├── fonts
│ │ └── OpenSans-Regular.ttf
│ └── js
│ └── main.js
├── images
│ └── logo.png
└── index.html
refer to scss file
Usually, we should specify the after building scss file to <link>
tag. I.e., Refer to assets/css/main.css
.
However, Spear convert .scss
to .css
in build process. So we can specify the style like bellow:
<link rel="stylesheet" href="/assets/css/main.scss">
After building, an above sample will be the bellow:
<link rel="stylesheet" href="/assets/css/main.css">