Hi all,
I have a style.css file that has been generated from style.scss, is there a way that I can output style.css in the <head> of my HTML using the <style> tag?
So my style.css:
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
And then in my
<style>
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
</style>
Reason being, I want my page to load all of the CSS in the <head> and not rely on an extra HTTP request so it helps on page loads. I was looking for a plugin for this but no luck. Can this be done with EJS?
Thank you in advance.
question
testareas
All 3 comments
You, sir, need a helper
./scripts/inject-helper.js
let fs = require('fs')
let path = require('path')
function injectRaw(relativePath) {
let absolutePath = path.join(__dirname, '..', relativePath)
return fs.readFileSync(absolutePath).toString()
}
function injectStyle(relativePath) {
return `<style>${injectRaw(relativePath)}</style>`
}
hexo.extend.helper.register('injectRaw', injectRaw)
hexo.extend.helper.register('injectStyle', injectStyle)
./themes/landscape/layout/index.ejs
<%- partial('_partial/archive', {pagination: 2, index: true}) %>
<div id="raw-injected">
🤔 will i be snazzy with a red border?
</div>
<%- injectRaw('dist/index.css') %>
<%- injectStyle('dist/index.css') %>
./dist/index.css
#raw-injected {
border: 1px solid red;
font-family: monospace;
}
Have we solved it?
tcrowe
on 9 Jun 2018
@tcrowe you sir are a genius! yes it works like a dream and will use the same code to output my JS also :D Thanks again, epic high five!
testareas
on 13 Jun 2018
🎉1
👍1
Yussss! :muscle:
tcrowe
on 13 Jun 2018
👍1
Was this page helpful?
0 / 5 - 0 ratings
Related issues
jasoncheng911
·
3Comments
bearpaw
·
3Comments
demurgos
·
3Comments
sfarzoso
·
3Comments
jo4x962k7JL
·
3Comments
Most helpful comment
@tcrowe you sir are a genius! yes it works like a dream and will use the same code to output my JS also :D Thanks again, epic high five!