inline-css
inline-css copied to clipboard
jonkemp
Link stylesheet didn't work
Hi! This plugin is so usefull.
I'm trying to link a external CSS to my email template. Before this step the CSS was in HEAD section and this want a problem. But i want use SASS as pre-processor to make it simpler. So i need a external CSS file. But when i try to include the CSS file, inline-css print this in console:
{ Error: getaddrinfo ENOTFOUND main.css main.css:80
at errnoException (dns.js:28:10)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:79:26)
code: 'ENOTFOUND',
errno: 'ENOTFOUND',
syscall: 'getaddrinfo',
hostname: 'main.css',
host: 'main.css',
port: 80,
response: undefined }
This is the code:
const fs = require('fs');
const inlineCss = require('inline-css');
fs.readFile('entry.html', 'utf8', (err, data) => {
inlineCss(data, { url: './', removeHtmlSelectors: true }).then(html => {
fs.writeFile('index.html', html);
}).catch(function(reason) {
console.log(reason);
});
});
And this is the HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="main.css" rel="stylesheet">
</head>
<body>
...
</body>
</html>
I have also tried '/', '.'.
I can't understand where is the problem. In the example i link the file in the same way.
Thanks in advance!
Try setting the url to the path of the file: options.url = 'file://' + file.path;.
Thanks for the response! I didn't have file, because the plugin itself take the name of the file to import. But i have a strange issue, i must write this code to work: file://' + __dirname + '\\currentDirectory'
If i save in a variable __dirname before the readFile function, Node print the current directory. If i use it in Url param, the plugin search main.css in the current directory but 1 level up on the system directory. I have the current directory in Desktop, Node print the entire path but the plugin use the Desktop path.
Hey @AFerreli I had the same funny issue with the script looking one directory up from where I wanted.
This was the solution:
url = 'file://'+__dirname + '/' +path.dirname(file)+ '/';
The slash at the end made things work fine for me. It makes sense when you think about how this option is designed for arbitrary href urls, that a trailing slash would be good.
This seems a little odd to have to pass in file:// and __dirname or to have to use path module. In the most basic of setup using a linked stylesheet. Is there a strong use-case for the module not doing this for the user, so that it uses the current directory of the process?
@matthewferry only options.url is required. Otherwise, it works exactly as you described.
@matthewferry the url option uses a URI to resolve href attributes. This lets it work identically for local files and online files, which is kind of nice when it comes to it.
I wouldn't split it out for the sake of avoiding a little .js when needed.
This issue was actual for me. I had to inline some code into subfolders - for develop email templates into the common project repo. I am using this module into gulp wrapper, so i pass options like:
gulp.task('inline-mails', ['less-mails', 'template-mails'], () => {
return gulp.src('./templates/email/build/*.html')
.pipe(inlineSource({
rootPath: path.join(__dirname)
}))
.on('error', function(err){
console.log(err);
})
.pipe(inlineCss({
preserveMediaQueries: true,
url: `file://${process.cwd()}/`
}))
.on('error', function(err){
console.log(err);
})
.pipe(gulp.dest('./templates/email/inlined/'));
})
Pay attention on last slash into value of url. It wont be work without last slash! With last slash after absolute path module works properly
