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?
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>
In material UI, the theme can be adjusted and/or overridden using the createMuiTheme function. This is the full file in which I am doing so:
import { createMuiTheme } from '#material-ui/core/styles';
import purple from '#material-ui/core/colors/purple';
import green from '#material-ui/core/colors/green';
//import wood from './static/wood.png';
const theme = createMuiTheme({
palette: {
primary: {
main: purple[500],
},
secondary: {
main: green[500],
},
},
overrides: {
MuiCssBaseline: {
'#global': {
body: {
border: '2px solid blue',
backgroundImage: 'url("/static/wood.png")',
},
},
},
},
});
export default theme;
The global styling applied to the body is confirmed working- I can see the blue border. However, nothing I try will get the background image to work.
Normally, I would uncomment the import statement at the top: import wood from './static/wood.png'; and then change the CSS line to:
backgroundImage: `url(${wood}),`
However, the import statement alone is causing a crash:
TypeError: Object(...) is not a function. It seems that there is something special about customizing a material ui theme that doesn't allow static assets to be imported in the same file.
When I instead attempt to use a url for the image (shown above), it is always a 404 error. My file structure places the image in src > static > wood.png, but I get:
http://localhost:3000/static/wood.png 404 (not found).
I've tried dozens of possible path variations, but none have worked, and all my efforts to research the proper path just indicate that I'm already using the correct path.
Is it only possible to add a background image to the body using Material UI theme customization when the background image is hosted on a separate server?
The only working examples I've found do it that way (like this one: https://codesandbox.io/s/v30yq681ql), but it seems like there must be a way to use an image stored locally.
Or if the problem really is that my relative path is incorrect, what can I do to find out what the correct one would actually be?
If there is a better way to add a background image to a page with Material UI that would work too, though I haven't seen any other way to do it than a global override of the body tag.
If you put your image within the src folder instead of static, e.g.
src/components/wood.png
Reinstate your import like:
import wood from './components/wood.png';
and then put the backgroundImage to:
backgroundImage: `url(${wood})`,
that should work. The same configuration (with different filename, but in the same location) works for me.
I want to change my project theme dynamically.I created different themes files like as "Blue",Red","Light","Black" etc .As my Given code below "light-theme.scss" is my theme file which I am requiring in App.html above from "ezmax-home-pages.scss" which is main file.
Basically light-theme file is importing in main file and changeing project theme.Its working for me .But there are many theme files.I cant change theme file path manually every time.
I google and find many solutions but none of those worked.I found that you cant use any variable in require tag etc Kindly tell is there any solution for my problem.
<require from="./assets/css/light-theme.scss"></require>
<require from="./assets/css/ezmax-home-pages.scss"></require>
Light theme
:root {
--themeColor: #007ACC;
--otherButtonColor: #26a69a;
--cancelButtonColor: rgb(244, 67, 54);
--themeBackColor: #F5F5F5;
--themeElementColor: #fff;
--themeAltColor: #f8fafb;
--themeNormalColor: #fff;
--themetxtColor: #000;
--themeAlttxtColor: #8997a6;
--themeDarkBorderColor: #D7D7DB;
--themeBorderColor: #e8eaed;
--themeDarkAltColor: #f0f4f6;
}
I want to make dynamic approach where i can change theme file path by selecting theme file name from drop-down like and code will change path of my theme file and project theme change dynamically.
Aamir. In your case, as you have webpack for bundling, you'd have to manage users stylesheets separate from the source code. If not, with every new customer you'd be forced to recompile and publish.
A solution is to have a repository with customers's stylesheets and build something like this:
themes = [
{
title: "default",
url:
"https://bootswatch.com/_vendor/bootstrap/dist/css/bootstrap.min.css"
},
{
title: "cerulean",
url: "https://bootswatch.com/4/cerulean/bootstrap.min.css"
},
{
title: 'darkly',
url: 'https://bootswatch.com/4/darkly/bootstrap.min.css'
}
];
activate() {
this.changeTheme(this.themes[0]);
}
changeTheme(theme) {
const head = document.getElementsByTagName("head")[0];
const itemId = 'css-sheet';
let link = document.getElementById(itemId);
if (!link) {
link = document.createElement("link");
link.id = itemId;
link.rel = "stylesheet";
link.type = "text/css";
link.href = theme.url; <-- here occurs the switch
link.media = "all";
head.appendChild(link);
} else {
link.href = theme.url;
}
}
This example works by choosing the theme from a dropdown menu. In your case, the url of the sheet should be inferred from the customer's profile.
A working example with external stylesheets is available on the following link https://codesandbox.io/s/aurelia-dynamic-css-enrge?fontsize=14.
Wish you the best.
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 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