Skip to content

youseffatomi/create-html-component

Repository files navigation

create-html-component

Get start

git clone https://github.com/youseffatomi/create-html-component.git
cd create-html-component
npm i
npm start

create pages with ejs

pages -> index.ejs

you can import components with ejs

see EJS repo

<!DOCTYPE html>
<html lang="en">
  <%- include("./../components/layout/head") %>
  <body></body>
</html>

note

you can only import file or image from root directory because ejs cannot found file

 //===>false
 <img src="./assets/x.png" />
 //===>true
 <img src="/assets/x.png" />

so you can use tailwindcss and sass or scss

see tailwindcss webpage

scss-> main

@import "./font.scss";
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

webpack

see webpack webpage

unMinify css

If you want to disable minify css , you must delete this

optimization: {
   minimizer: [new CssMinimizerPlugin()],
},

change build directory name

output: {
   path: join(__dirname, "build"),
},

change port serve

new BrowserSyncPlugin({
   port: 3000,
})

Tailwindcss

change font family name

tailwind.config.js

fontFamily: {
   sans: ["FontWeb"],
},

Build file

npm run build
├── style
├── script
├── assets
│   ├── fonts
│   ├── images
├── index.html

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published