76 lines
1.9 KiB
Markdown
76 lines
1.9 KiB
Markdown
## TODO
|
|
* better documentation regarding the CSS files
|
|
* Eslint errors - do not stop compilation, just emit warnings?
|
|
* CSS linting (needs to be postcss compatible)
|
|
|
|
|
|
## Included
|
|
|
|
* ejs templating
|
|
* js transpilation (babel)
|
|
* eslint
|
|
* postcss
|
|
* sass
|
|
* HMR development server
|
|
|
|
## Usage
|
|
|
|
### Default Text Spacing Styles
|
|
|
|
There are no default *base* text spacing styles. However, there are default styles that are applied when textual elements are child elements of a `.text-component` class.
|
|
|
|
### Templating
|
|
|
|
`ejs-compiled-loader` is used to load `ejs` templates. Templates are found in `src/templates/`. The template entry point is `index.ejs`. Partials can be placed in `src/templates/partials/`.
|
|
|
|
Partials may be included with:
|
|
|
|
```html
|
|
<%- require('!!ejs-compiled-loader?{}!./partials/component.ejs')({ text: 'text is text yahh!!!' }) %>
|
|
```
|
|
|
|
The unusual loader string syntax is due to this [issue](https://github.com/bazilio91/ejs-compiled-loader/issues/46).
|
|
|
|
(uses workaround for [issue](https://github.com/bazilio91/ejs-compiled-loader/issues/46)).
|
|
|
|
### CSS
|
|
|
|
CSS in `src/css/` is processed by **postcss**.
|
|
CSS in `src/sass/` is processed by **SASS**.
|
|
|
|
`src/postcss/` contains **postcss** JavaScript defined mixins and functions.
|
|
|
|
### Image Assets
|
|
|
|
Supported file types are: `png`, `svg`, `jpg`, `jpeg`, and `gif`.
|
|
|
|
These are loaded using webpack 5's inbuilt asset modules.
|
|
|
|
* Path to the asset file is relative to the source file.
|
|
* Assets are automatically inlined or exported as a resource based on the file size.
|
|
Default size is 8kb - see [docs](https://webpack.js.org/guides/asset-modules/) for configuration.
|
|
|
|
#### Example includes
|
|
|
|
HTML:
|
|
```html
|
|
<img src="./my-image.png" />
|
|
```
|
|
|
|
However, in `ejs` template files we need to use:
|
|
```html
|
|
<img src="<%=require('../img/my-img.jpg');%>">
|
|
```
|
|
|
|
CSS:
|
|
```css
|
|
url('../img/my-image.png')
|
|
```
|
|
|
|
JavaScript:
|
|
```
|
|
import myImg from '../img/1.jpg'; // returns the URL of generated asset as a string
|
|
```
|
|
|
|
|