After "run build" css files are not imcluded within html #18872

DevKame · 2024-12-03T14:52:34Z

DevKame
Dec 3, 2024

Hello everyone,

i started my first project trying out with Vite, and so far it works good. When building for production with npm run build, it does convert scss files correctly into a css file, but the resulting html file does not include the newly created css file.

I included sass in my project using npm add -D sass

This is my project directory:

I include my scss files within my app.ts:

import "@/css/libs/fontawesome/all.min.css";
import "!/kamelib/kame.scss";
import "!/global.scss";
import "!/header.scss";
import "!/fonts.scss";

When running npm run build, my dist folder looks like this:

and the newly created HTML looks like this:

No trace of trying to include the newly created css file.

How to i "tell" Vite to include that when building?

vite.config.js:

import { defineConfig } from "vite";

export default defineConfig({
    resolve: {
        alias: {
            "@": "/src",
            "!": "/dev_scripts",
        },
    },
});

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "!/*": ["dev_scripts/*"],
    },
  },
  "include": ["src"]
}

package.json:

{
  "name": "viteproject",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "sass": "^1.81.0",
    "typescript": "~5.6.2",
    "vite": "^6.0.1"
  }
}

sapphi-red · 2024-12-04T04:55:24Z

sapphi-red
Dec 4, 2024
Maintainer

The output should include the reference to the assets/index-WFnWSDKL.css. Would you create a minimal reproduction?

1 reply

DevKame Dec 4, 2024
Author

Sure, no problem. Except the index.html i did already post the rest of the code as text, here is the following HTML and a slightly changed app.ts. Let me know what more you need :)
index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./src/ts/app.ts" type="module"></script>
</head>
<body>
  [...]
</body>
</html>

app.ts: (do not wonder, i changed my aliases in the meantime)

import "@SRC/css/libs/fontawesome/all.min.css";
import "@A/kamelib/kame.scss";
import "@A/global.scss";
import "@A/header.scss";
import "@A/fonts.scss";

[...]

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

After "run build" css files are not imcluded within html #18872

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

After "run build" css files are not imcluded within html #18872

DevKame Dec 3, 2024

Replies: 1 comment · 1 reply

sapphi-red Dec 4, 2024 Maintainer

DevKame Dec 4, 2024 Author

DevKame
Dec 3, 2024

Replies: 1 comment 1 reply

sapphi-red
Dec 4, 2024
Maintainer

DevKame Dec 4, 2024
Author