I have a new Svelte app using Sveltekit, skeleton project. I create a component with a single div and attempt to set a background image. I am using adapter-static to generate a static site on build. If inline the css on the div, it works fine. If I create a class in the <style> block of the component then the styles do not load.
The component:
<div class="foo-test"
style="width: 500px; height: 500px; background-image: url('circle.png');">
</div>
npm run build. files created:
it works:
change the component to use css in <style> block:
<div class="foo-test"></div>
<style>
.foo-test {
width: 500px;
height: 500px;
border: 2px solid black;
background-image: url("circle.png");
}
</style>
build again. files created. No css applied:
My svelte.config.js:
import adapter from '#sveltejs/adapter-static';
/** #type {import('#sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter(),
prerender: {
default: true
}
}
};
export default config;
Am I missing a step to the process? New to Svelte. TIA
Edits:
app.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<link rel="icon" href="%svelte.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%svelte.head%
</head>
<body>
<div>%svelte.body%</div>
</body>
</html>
Edit2: I should note, it works correctly then running in dev npm run dev and launch browser to http://localhost:3000/. only the index.html file generated from the adapter-static is not working properly when I open the file in the browser file:///C:/Repos/foo/foo/build/index.html
It is possible that you are deploying to Github Pages and you have not included a .nojekyll file. I saw this behaviour and resolved it by adding .nojekyll in the /static directory.
It appears that Jekyll does not recognise the directories with a leading underscore.
If using gh-pages to deploy, you also need to use the --dotfiles options to ensure that the file is pushed.
Note: I still don't see that loading the built files directly works locally, but I am not sure that that would be expected behaviour.
Related
I have a ReactJS app using create-react-app, using the MUI library and a small amount of custom CSS. During development everything is fine, but when i create a production build with npm run build or npm run-script build for deployment, the custom CSS that i include in index.js is missing and not applied:
index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();
The index.css file is right next to it in the same directory. During my search for this problem, i saw that some people had this issue because they did not use a relative include path for the stylesheet. However, clearly i am using a relative path in my case (starting with ./..). I also tried moving around a bit to see if it works with e.g. ../src/index.css but it still is not included in the production build. Everything else, including the MUI library styles etc. works perfectly fine. Why is my index.css file ignored/not getting included in the production build?
Edit: I am building the production build on a NodeJS docker container as part of a multi-stage build before i move it to an NGINX container. npm run build does not work on the NodeJS docker container for some reason, so i have to use npm run-script build. I added this in case this is relevant.
Edit 2: I have moved index.css to the public directory and added a link tag to the index.html. The index.css is also successfully loaded in the production build now, but the style in it is not being applied.
index.html in public directory:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<link rel="stylesheet" href="/index.css" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
index.css also in public directory:
:root {
--qs-orange: rgb(238, 127, 0);
--qs-blue: rgb(61, 192, 241);
--qs-black: #333;
--qs-purple: rgb(153, 0, 153);
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.status-running {
background-color: #66CDAA;
color: white;
}
.status-failed {
background-color: red;
color: white
}
.status-default {
background-color: var(--qs-blue);
color: var(--qs-black)
}
Screenshot from the browser console to show index.css is loaded, but the style is not there in the elements (e.g. the headline element does not use the specified font-family. the body element also ignores it). Mind you, this works in the development version without production build. Font-family and all the stuff specified in index.css is applied to elements where it is not specifically overwritten.
You can use <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/index.css" /> in the index.html
I recently started to learn TailwindCSS a few hours ago and I wanted to create a navbar with using tailwindcss. I installed and set up everything, so I even tried to create a circle with tailwind and everything was working fine.
I wanted to create a navbar and gave some style.(background, etc...) was working fine.
Then, I wanted to add a padding(p-(value) in tailwindcss)
But it didnt worked. I just checked if there's problem with code or not using TailwindPlay(tailwind css emulator) so, the code was working fine in there.
But in my VSCode, padding doesn't work. I do not have any idea why.
Here's my codes;
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--Navbar-->
<nav class="relative container mx-auto p-15">Hello</nav>
</body>
</html>
`
I'm looking forward to someone who can help me with that...
I'm the fresh guy and I do not want to give up after started to learn something new
I just checked if there's problem with code or not using TailwindPlay(tailwind css emulator) so, the code was working fine in there.
But in my VSCode, padding doesn't work. I do not have any idea why.
Class p-15 doesn't exist in tailwind. Only p-14 and p-16. You can create your own padding p-15 using tailwind.config.js
https://tailwindcss.com/docs/padding#customizing-your-theme
Also, I recommend you use Tailwind CSS IntelliSense plugin in VSCode
theme: {
extend: {
padding: {
'15': '3.75rem', // 60px
}
}
}
}```
I have a custom CSS file site.css (which is returning 200 when running the project) I started with a blank ASP.NET Core 5 web application and added MVC functionality in, so I added Bootstrap js/css files and jQuery manually.
When I try to run the project, none of the site.css styles show up but there are styles from a file called scaffolding.less, which Chrome Dev Tools says is located in lib/bootstrap/css/less/. I can't find any less file in the bootstrap/css folder, so I'm not sure where that is coming from, unless it's added at runtime. I've included the head element code of the _Layout.cshtml. Any ideas as to why the site.css styles aren't being added?
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
<link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
<link href="~/content/site.css" rel="stylesheet" />
</head>
Here's part of the site.css file (bootstrap is making the background white, but it should be the picture from the url() repeating (I put the !important in after to try if it would override anything):
body {
padding-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
background-image: url('/images/pattern.png') !important;
background-repeat: repeat;
font-family: 'Source Sans Pro', sans-serif;
}
Here's a brief view of the wwwroot hierarchy:
I've run into trouble using my own stylesheet while using Bootstrap. This is the beginning of my header.php (which I import in the beginning of index.php):
<html>
<head>
<link href="includes/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/mystyle.css" rel="stylesheet">
EDIT:
I've found out that for some reason I can include the file if it is in the same folder by: <link mystyle.css" rel="stylesheet">
but if I move the folder the includes folder and do as I did in the beginning, for some reason it won't import the stylesheet. Very weird...
You might have to use a more specific selector or use !important (less recommended).
Try setting an id for your menu, lets say my-menu. Then, change the selector:
#my-menu {
width: 300px;
height: 400px;
}
If you don't want to use an ID, try adding !important:
.dropdown-menu {
width: 300px !important;
height: 400px !imporatnt;
}
I solved it by putting the file out of includes. I tried later putting it in the includes file again and reference it by <link href="includes/mystyle.css" rel="stylesheet">, and now it works. It might've been an spelling error. Case closed!
When building a prod version of my Angular 9.0.4 app the css is bundled and added at the top of the dist/index.html like this:
<link rel="stylesheet" href="styles.6ea28d52542acb20a4c6.css"><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyTitle</title>
<base href="/">
Which I think is causing the warning in Chrome:
Resource interpreted as Stylesheet but transferred with MIME type text/html:
and the stylesheet is not rendered correctly. Note this happens only when loading the domain with subfolders e.g. www.mydomain.com/product/1
Is it possible to configure the build such that the stylesheet element is added below <base href="/"> which would possibly fix the warning?
I'm not aware of any way to move the css file import, but you can stop this error by turning off css extraction:
yarn build --extractCss=false
OR inside your build configurations in angular.json
{
...
"build": {
"configurations": {
"yourBuildName": {
...
"extractCss": false
}
}
}
}