Comments (6)
use the pug-plugin, then you can load JS/TS and SCSS/CSS directly in Pug:
link(href=require('./styles.scss') rel='stylesheet')
script(src=require('./main.js'))
Pug plugin extract CSS and JS from their sources loaded in Pug.
Generated HTML contains hashed CSS and JS output filenames:
<link href="/assets/css/styles.05e4dd86.css" rel="stylesheet">
<script src="/assets/js/main.f4b855d8.js"></script>
Specify the Pug files in the Webpack entry:
const PugPlugin = require('pug-plugin');
module.exports = {
entry: {
// define your Pug files here
index: './src/views/home/index.pug', //=> dist/index.html
about: './src/views/about/index.pug', //=> dist/about.html
},
plugins: [
new PugPlugin(), // enable rendering of Pug files defined in Webpack entry
],
module: {
rules: [
{
test: /.pug$/,
loader: PugPlugin.loader, // Pug loader
},
{
test: /\.(css|sass|scss)$/,
use: ['css-loader', 'sass-loader']
},
],
},
};
from pug-loader.
@webdiscus, thanks a lot for the quick answer. I just realised you're on both webdiscus/pug-plugin and pugjs/pug-loader. It's quite confusing but the work is clever, useful and irreplaceable.
I'm on the latest versions of node, npm and pug. I have 2 tasks to perform in my app:
1- Get a .pug file as an HTML string
For this task, pugjs/pug-loader works very well. But webdiscus/pug-loader doesn't.
2- Load a CSS file in a pug template
Your explanations are very clear. However, is there a way to do this work without having to declare pug files in the entry section of the webpack.config.js file? I'm just thinking that the code in your example might become tedious if I have a lot of template files. In the case I'm working on, could I keep my entry declaration as an index.js file and still be able to load any pug file in any CSS file without having to declare the pug files one by one in the entry section?
Great effort, great work. Thanks again!
from pug-loader.
I don't use the pugjs/pug-loader
, it's is outdated and has a warning by npm i
. Instead of pugjs/pug-loader
, in pug-plugin is used the much improved @webdiscus/pug-loader.
- The
@webdiscus/pug-loader
can get a Pug file as HTLM string. The@webdiscus/pug-loader
has 3 methods for Pug compilation:
compile
works same as bypugjs/pug-loader
=> compile to template function for using with paramsrender
compiles to exported HTML string, use it if your Pug template has't params.html
compile to pure HTML string at compile time. Usually used with Vue, Angular.
You can see use examples of the methods.
- The
pug-plugin
is designed for using Pug-file as entry-point. The Pug-file must contain all assets (SCSS, JS/TS) in itself, like a native HTML contains CSS, JS. This is "philosophy" of the Pug plugin.
Therefore, using pug-plugin, the Pug files must be defined in Webpack entry.
You can define theindex.pug
as entry-point in Webpack, thisindex.pug
can load a JS file, what can load a Pug template.
The entry-point index.pug.
html
head
link(href=require('./styles.scss') rel='stylesheet')
body
#root
script(src=require('./app.js'))
The application JS file app.js
// the pug-plugin use default method `render`,
// but to load a Pug file in JS as the template function can be used the query param '?pug-compile'
const tmpl = require('./app.pug?pug-compile');
// call template function with props used in template => HTML string
const html = tmpl({
myString: 'some text...'
});
// AND / OR if your Pug template hasn't props, then load it as HTML string:
const html2 = require('./app.pug');
document.getElementById('root').innerHTML = html;
The template app.pug
h1 Hello Pug!
p= myString
The idea of pug-plugin - avoid to define JS, SCSS files in Webpack entry. For each web page must be defined the Pug file as entry-point. If you has many pages, you can write a function (5 lines code) to dynamic generate entries.
P.S.
don't use the html-webpack-plugin and mini-css-extract-plugin together with the pug-plugin
. The pug-plugin
replace the functionality of its plugins.
from pug-loader.
@webdiscus, after declaring an index.pug entry following your webpack.config.js example, the template is loaded.
But if I call a CSS file in the index.pug, the app breaks. No index.html is generated in the dist folder.
I haven't tried to render a pug template yet. I'm just trying to load a CSS file in the index.pug entry file.
My index.pug entry file is in src/tpl/index.pug
In the index.pug file, I call an index.css file in src/css/index.css using link(rel='stylesheet', href=require('../css/index.css'))
Am I missing something?
from pug-loader.
can you please create an issue by pug-plugin/issues with a link to your repo, then I can see where is a problem and can help you.
Do you have the module rule for CSS in Webpack?
{
test: /\.css$/,
use: ['css-loader']
},
from pug-loader.
It looks like I was having issues because of trying to render the pug files in an iframe. I opted for a s impler app structure without iframe and it works smoothly now. Thanks a lot for your help.
from pug-loader.
Related Issues (20)
- require a variable HOT 2
- “include” correctly imports content, but “extends/block” yields no content or errors HOT 1
- Can't get some Mixins correctly loaded: Empty mixins
- Interpolation not working
- 'module' is not a known element error HOT 7
- how to remove comments in pug template?
- Can not use require with variable in mixin HOT 6
- 'Module not found: Error: Can't resolve` when use a mixin and require on same file HOT 3
- Is this package still being maintained? HOT 43
- any support for webpack-4 or webpack-5 HOT 6
- warning " > [email protected]" has incorrect peer dependency "pug@^2.0.0". HOT 6
- Unbuffered Code Issue with variables declared at beginning of pug template when using loader HOT 3
- Raise error manually
- Angular 11 postinstal script error(solution)
- Includes and or mixins sometimes do not trigger changes in parents while watching HOT 1
- Pug > 3, pug-loader error. HOT 3
- pug-loader no longer maintained? HOT 1
- esbuild alternative HOT 4
- Npm Audit report HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pug-loader.