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>
Related
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?
I have recently added laravel-mix-purgecss to my laravel project. Its went great till I noticed it stripped all the css from Summernote. How can I exclude the css from the purge or include all the classes so Summernote works?
Note that Summernote worked fine until I used Purgecss. Also Summernote is inside a Vue Component.
Here is what I tried so far..
webpack.mix.js
let mix = require('laravel-mix');
const glob = require('glob-all');
require('laravel-mix-purgecss');
mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/app-admin.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/app-admin.scss', 'public/css')
.purgeCss({
enabled: true,
// This code didnt help and throws a error when I 'npm run dev'
// globs: () => [
// path.join(__dirname, 'node_modules/summernote/**/*.js'),
// ],
// This code was not required. Works without it
// paths: () => glob.sync([
// path.join(__dirname, 'resources/views/**/*.blade.php'),
// path.join(__dirname, 'resources/assets/js/**/*.vue')
// ]),
extensions: ['html', 'js', 'php', 'vue']
});
Summernote is included in a .vue component
<script>
import 'summernote'
export default {
components: {
'summernote' : require('./../Summernote')
},
.....
}
</script>
Ok, So I figured it out but it's not through webpack or laravel mix. It's simply that you copy all the outputted html of summernote and paste it in a new blade file (or any file that you tell PurgeCss to look in) that you simply never use. PurgeCss will look through all your blade files and find all the classes.
So what I've done is make a master include file that will contain all classes that doesnt not already appear in all Vue or blade.php files. No need to include that file in Laravel.
This will work with any class that PurgeCss can not find in your files. Just make a div with all the classes and through that file in where the rest of your view files are.
<div class="any-misses-classes-here"></div>
That means the Code in my original post above will work. Just delete everything that is commented out.
This solutions feels kind of silly but simple. Hope this helps anyone with the same issue!
I'm building a website using Vue but I have 2 separate css files, 1 for normal ltr and one for rtl.
Now according to the URL xyz.com/en or xyz.com/ar I can serve the appropriate file, based on server-side logic. However, I want this to be done on the client via Vue Router.
So that the URLs can look like this xyz.com/#/en or xyz.com/#/ar
You could have language specific CSS inclusions <link href="..." /> from the respective components for EN and AR as shown below.
routes: [
{
path: '/en',
name: 'Welcome EN...',
component: WelcomeEN
},
{
path: '/ar',
name: 'Welcome AR...',
component: WelcomeAR
}
]
Do you think that would work for you ?
this is an example of conditional css loading inside a component
// change x to change color
const x = true;
if(x)
require("./assets/style.css");
else
require("./assets/stylegreen.css");
code snippet of conditional css loading in vue
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
My manifest is not working when I add CSS into it, while it works in Chrome Extension when I do like that.
Here how my manifest looks:
"css": ["css/jquery-ui.css", "css/font-awesome.css", "css/simplegrid.css", "css/basic.css"],
"js": ["jquery.js", "jquery-ui.js", "myPeaceFile.js"],
myPeaceFile.js works, jquery's are working. But CSS files are not.
I previously asked question about jquery's not working. It looked like this:
"js": ["peace.js", "jquery.js"] - didn't work.
Then I was suggested this and it worked:
"js": ["jquery.js", "peace.js"]
Is it something similar? Please help.
Thanks!
You can attach CSS to pages using Style, in your main.js define a style and attach this style to the contentscript.
var { Style } = require('sdk/stylesheet/style');
var style = Style({
uri: './bootstrap.css'
});
tabs.on('ready', function(tab) {
let worker = tab.attach({
contentScriptFile: [
data.url("jquery.min.js"),
data.url("jquery-ui/jquery-ui.min.js"),
data.url("mycontent-script.js"),
]
});
attach(style, tab);
});
At the Style constructor in the second line you can pass a string, or an array of strings, that represents local URI to stylesheet. In this case the ./bootstrap.css is in the data folder of the extension.