pug-plugin
static-pug-boilerpalte
Our great sponsors
| pug-plugin | static-pug-boilerpalte | |
|---|---|---|
| 4 | 3 | |
| 67 | 1 | |
| - | - | |
| 6.7 | 0.0 | |
| 18 days ago | about 1 year ago | |
| JavaScript | SCSS | |
| ISC License | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
pug-plugin
- Pug plugin for Webpack compiles Pug files to HTML, extracts CSS and JS from their sources specified in Pug
-
How to use Pug & Sass in Webpack 5 - 2022 🐶
You can customize this file and delete or insert anything you like. The code up here it's based on the Instructions for pug-plugin.
-
Pug plugin for Webpack
The pug-plugin highlights: - The Pug file is the entry point for all scripts and styles. - Source scripts and styles should be specified directly in Pug. - All JS and CSS files will be extracted from their sources specified in Pug. - No longer need to define scripts and styles in the webpack entry. - No longer need to import styles in JavaScript to inject them into HTML via additional plugins such as html-webpack-plugin and mini-css-extract-plugin.
-
What is the best way of compiling/bundling pug.js for a static site these days?
Try to use the pug-plugin for Webpack.
static-pug-boilerpalte
-
Freelance
If you're at all interested, I have a boilerplate repo here that includes features like generating svg spritesheets from an icon directory, image minification, and many other little nice additions to speed up the process. I need to get around to updating the readme which is a bit dated but you can probably get a fair idea of what's going on by just taking a look at it, especially if you're at all familiar with gulp.
-
What is the best way of compiling/bundling pug.js for a static site these days?
I have used webpack before on React projects in the past, but rarely do I ever deep-dive into it and fully understand what is going on under the hood, so I decided I'd try my hand updating my boilerplate to leverage Webpack, but am a bit confused on going about doing it.
-
SCSS nesting doesn't work
No, you're right about using @use and @forward rather than @import. These days I generally work with CSS in JS using something like styled-components, but when I do work on static sites, I funnily enough do use a rather nice gulp build I've put together over the years, that leverages browserstack and pug, so @import works for me... but I should really update my boilerplate.
What are some alternatives?
pug-loader - Pug loader for Webpack renders pug to HTML or template function
styled-components - Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
gulp-pug-starter - Frontend development with pleasure. Pug + SCSS version
html-bundler-webpack-plugin - This plugin allows to use an HTML template as a starting point for all dependencies used in your web application. All source styles, scripts specified in HTML are processed, and the extracted JS, CSS are saved to the output directory. The plugin automatically substitutes output filenames into the generated HTML file.
offline-plugin - Offline plugin (ServiceWorker, AppCache) for webpack (https://webpack.js.org/)
eink-css-ui-framework - ePaperCSS: The ePaper CSS UI framework for e-ink and ePaper displays. Optimized for grayscale & accessibility
parallax-3d-lens-effect - 3D parallax effect by mouse moving using CSS transform
webpack-fix-style-only-entries - Webpack plugin to solve the problem of having a style only entry (css/sass/less) generating an extra js file.