#npm run dev css works properly but npm run build is not working.

1 messages · Page 1 of 1 (latest)

misty delta
#

Hi I am new to Vite. Just try a simple things but already face a problem.

I only modified a simple html which is only has <h1> Hello There>, and modified the css file just very simple.

body {
background: black;
color: aliceblue;
}

It works properly when I run 'npm run dev"

However, when I want to build it,

'npm run build"

It looks everything is perfect. See below

dist |
| | assets - index.74d163d3.js
| - index.aff04cba.css
| - index.html

However the result is white background and black text.

This is the package json :

{
"name": "pixanthony",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"vite": "^3.1.0"
}
}

This is the code in index.aff04cba.css

body{background:black;color:#f0f8ff}

This is the code in index.html file:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Vite App</title>
<script type="module" crossorigin src="/assets/index.74d163d3.js"></script>
<link rel="stylesheet" href="/assets/index.aff04cba.css">
</head>

<body>
<h1>Hello There !!!</h1>

</body>

</html>

Very simple and clean, just dunno what is going on.

misty delta
#

Finally I found that what is the problem, it is about the path. if I delete the / then it works.

<link rel="stylesheet" href="assets/index.aff04cba.css">

instead of
<link rel="stylesheet" href="/assets/index.aff04cba.css">

So I have other question, when I build the projection, how can it export the right path?