I'm new to NodeJS and I'm using Express to serve my pug files/view. Furthermore I'm using "express-sass-middleware" to compile and serve the scss/css files. Everything works very well but unfortunately, the CSS are not applied.
My app.js files looks like:
var express = require('express');
var sassMiddleware = require('express-sass-middleware');
var app = express();
app.set('view engine', 'pug');
app.get('/css/bootstrap.css', sassMiddleware({
file: 'css/bootstrap.scss', // the location of the entry point,
// this can also be a directory
precompile: true, // should it be compiled on server start
// or deferred to the first request
// - defaults to false
}));
app.get('/', function (req, res) {
res.render('index', {
varTitle: 'Hello World'
});
});
app.listen(3000, function() {
console.log('Example app listening on port 3000!');
});
And my simple css file looks like:
// $icon-font-path: /3rdparty/fonts;
// #import 'bootstrap/bootstrap';
// #import './node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';
body
{
background-color: green;
font-size: 100px;
}
My index.pug file is:
doctype html
html(lang='en')
head
title= varTitle
link(ref='stylesheet' type='text/css' href='/css/bootstrap.css')
body
h1= varTitle
Now, when I start my webserver using "node app.js", accessing http://localhost:3000, I see "Hello World" but unfortunately the body background isn't green and the text is also not 100px. That means that the css file is not applied. But when I access http://localhost:3000/css/bootstrap.css, I see the valid, css file.
Anyone know what I'm missing here? I'm a bit confused that I see the CSS source when accessing it directly but the browser doesn't apply the css styling. I already tried different browsers without any success. None of them applying the css file.
You have typing error in index.pug file for loading css file. You had mentioned ref whereas it should be rel.
link(rel='stylesheet' type='text/css' href='/css/bootstrap.css')
Happy to help you.
you don't seem to be serving the static files from your nodejs server code. You have to add your css dir in order to allow access from your html code:
app.use('/static', express.static('public'))
Now, you can load the files that are in the public directory from the /static path prefix.
http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html
Related
I created a little page with sveltekit and tailwind css. Now I want to use the sveltejsadapter-static to create a complete static html version. This works fine for all subpages like /imprint or /privacy but the the first page / doesn't load the stylesheet.
Here's my svelte.config.js
import adapter from '#sveltejs/adapter-static';
const config = {
kit: {
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: null,
precompress: false
}),
trailingSlash: 'always',
prerender: {
default: true
}
},
};
export default config;
By browsing to /imprint all styles look fine. The link to the stylesheet starts with /_app/…
When I load the base url, I can see the correct styles flashing for some milliseconds, but after that, all styles are gone. If I remove the / of the style and js links in the source code (_app/…), the page looks fine. But I can't find an option to create the first index file without the staring slash.
Also strange: When I click on the logo from /imprint (which links to /), the page looks fine, but never on first load.
Found the solution.
I defined the html tag in a component which is already defined in the app.html.
<svelte:head>
<html lang="de" />
</svelte:head>
I have two projects, both of them with the same code in my next.config.js file:
const withImages = require("next-images");
/* ... */
module.exports = withImages({
images: {
disableStaticImages: true,
},
/* ... */
});
However, when you see at the DOM, you'll notice that one project is showing inline images as base64 string in it's img src attribute, whereas the other one is showing a reference link to a static file instead.
The project showing inline images is the version 12.0.8 of next.js, and the project showing a static file link reference is the version 12.0.9.
Any idea how to make the second project show inline images in base64?
This is basically the code I am using and lighthouse says my (almost empty!) css bundle is delaying my initial load.
So how do I put a link to critical.scss in the
<head><style>DONT_WANT_TO_WRITE_STUFF_INLINED</style>...</head>
Is there a better solution than https://www.npmjs.com/package/critical or writing everything inlined?
And how do I delay the load of the main styles.scss until the prerendered Universal content is loaded in the browser? The server-app's config in angular-cli.json does not contain styles or assets, so I don't understand why styles.scss is loaded initially
Regarding delaying the load of the main styles.scss, I rely on two things:
First of all, I build the application with the --extract-css=false flag. That ensures that the styles bundle will be a JavaScript file.
Second, I defer the loading of that file. To do so I rely on a small script that I called defer.styles.js and that runs at the end of the build process. That script simply looks for the script tag that loads the styles, and adds a defer to it.
const path = require('path');
const htmlPath = path.join(__dirname, 'dist', 'browser', 'index.html');
fs.readFile(htmlPath, 'utf8', (err, data) => {
if (err) {
console.log(err);
return;
}
const index = data.search(`src="styles.`);
if (index > -1) {
const output = [data.slice(0, index), 'defer ', data.slice(index)].join('');
console.log(output);
fs.writeFile(htmlPath, output, 'utf8', () => {
console.log('Styles succesfully deferred');
})
}
});
Regarding your other question - how to load the critical css -. I still didn't find a way of comfortably doing it.
I have a very basic gulp task, and I want to process a Stylus CSS file (.styl). This is the task inside the gulpfile:
const gulp = require("gulp");
const gulpIf = require("gulp-if");
const useref = require("gulp-useref");
const stylus = require("gulp-stylus");
const cssnano = require("gulp-cssnano");
gulp.task("default", function(){
return gulp.src("*.htm")
.pipe(useref())
.pipe(gulpIf("*.css", stylus()))
.pipe(gulp.dest("dist"))
});
And this is the particular section of the html
<!--build:css css/style.min.css -->
<link rel="stylesheet" href="style.styl">
<!-- endbuild -->
For whatever reason, the Stylus file just doesn't get processed, and gets copied to css/style.min.css without any processing.
Even stranger, is that if I format the CSS as a normal CSS file and replace "stylus()" with "cssnano()", cssnano works fine and minifies the file. Stylus works fine outside of the useref and gulpIf when ran as its own task, but I preferably want to use it like this.
Can you try specifying the root path for useref where it can find assets:
options.searchPath
Type: String or Array Default: none
Specify the location to search for asset files, relative to the
current working directory. Can be a string or array of strings.
Your task
gulp.task("default", function(){
return gulp.src("*.htm")
.pipe(useref({
searchPath: 'assets_path_here'
}))
.pipe(gulpIf("*.css", stylus()))
.pipe(gulp.dest("dist"))
});
I personally just set the path to the root that contains my entire app.
I use gulp as a build system in my web project
I have a number of CSS files (well, actually, LESS, but it does not matter)
I do link image files from my CSS rules in this way:
.my-rule {
background-image: url('/images/kitten.svg');
}
Next, I'm embedding those images as Base-64 into my production CSS files.
That is a gulp task:
var gulp = require("gulp"),
...
base64 = require('gulp-base64');
gulp.task("sass", function () {
return gulp.src(paths.styles)
.pipe(base64())
.pipe(concat("concatedstyles.css"))
.pipe(gulp.dest(paths.webroot + "css"));
});
The problem is:
When I link to non-existing file:
.my-rule {
background-image: url('/images/non-existing-kitten.svg');
}
the build system does not report me about failure.
It just leave this line as is.
So, I'm not aware about error at build time, only at runtime.
I tried to play with .pipe(sass.sync().on("error", sass.logError)), but no luck.
Any advice?