Main app.css does not get included in the production builds

[juhasev]

I have this issue with Laravel app that uses Vite to compile JS / CSS assets for production. For some reason the production app.css does not includes anything from the app.css although I have specified it in the Vite config below. Any ideas? Anybody else run into this issue?

Thanks, Juha

import dotenv from 'dotenv'
import path from 'path';
import {createVuePlugin} from 'vite-plugin-vue2';
import {VuetifyResolver} from 'unplugin-vue-components/resolvers';
import Components from 'unplugin-vue-components/vite';
import {BugsnagBuildReporterPlugin, BugsnagSourceMapUploaderPlugin} from 'vite-plugin-bugsnag';

dotenv.config();

export default (command) => ({

    // Change base paths automatically between local and production
    base: command === 'server' ? '' : '/build/',

    // Fake folder so Vite does not copy static assets to the public PR request out to remove it
    publicDir: 'fake_folder_to_skip_asset_copy',

    build: {

        // Generate source maps
        sourcemap: true,

        // Generate manifest where PHP can find the entry point from
        manifest: true,

        // Vite will clear the entire folder here, thus let's place everything in build folder
        outDir: 'public/build',

        // Change defaults folders to match Laravel
        rollupOptions: {
            input: [
                'resources/js/app.js',
                'resources/css/app.css', // <--- SPECIFIED HERE
            ],
        }
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js',
            '@': path.resolve('resources/js'),
        }
    },
    plugins: [
        createVuePlugin(),
        Components({
            dts: true,
            // auto import for directives
            directives: false,
            // resolvers for custom components
            resolvers: [
                // Vuetify
                VuetifyResolver(),
            ],
        })
    ],

    server: {
        https: {
            key: './aws/dockerdevbox/nginx/sampleninja.app.key.pem',
            cert: './aws/dockerdevbox/nginx/sampleninja.app.cert.pem',
        },
        host: 'sampleninja.app',
        port: 3000,
        hmr: {
            overlay: true
        }
    },

    // https://vitejs.dev/config/#css-preprocessoroptions
    css: {

        // To use custom scss file with Vuetify
        preprocessorOptions: {
            sass: {
                additionalData: [
                    '@import "resources/sass/variables.scss"',
                    '',
                ].join('\n'),
            },
        },
    },
});

[bogdan-calapod]

Maybe there is a tree-shaking logic there that drops the css file, even though you have imported it ?

Have you tried importing the css file in app.js ?

[juhasev]

I think you might be right. Since there is no index.html Vite may not see the app.css is used anywhere in the app.

Thanks I will try that!

[Said20hr]

add postcss.config.js file and it will work:
postcss.config.js module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

[Eternal-Rise]

I have the same issue. Vite ignores index.css when output entryPoint is not an html file. But I need my entryPoint as js... Here is my config

import { defineConfig } from "vite";

export default defineConfig(({ mode }) => {
  const isProduction = mode === "production";

  return {
    base: isProduction ? "/map/" : "",
    build: {
      outDir: "dist",
      minify: isProduction,
      rollupOptions: {
        input: "src/index.ts",
        output: {
          entryFileNames: "index.js",
        },
      },
    },
  };
});

[d00rsfan]

I have resolved it: created postcss.config.js as mentioned before (without tailwindcss) and add plugin with option to vite.config.js:

import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
.......
plugins: [react(),
    cssInjectedByJsPlugin({ relativeCSSInjection: true }),
  ],

As result it adds IIFE function in the beginning of bundled file. The function adds style node to document with styles as a string.

[Eternal-Rise]

Yes, I found this package too. But I don't won't to put all my css in js :) Likely, I found a way to include only index.css, that is missed by vite

#14192 (comment)

[CocoTheDev]

I resolved it by adding the file into vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from "@vitejs/plugin-vue";


export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/foobar.css',
            ],
                
                
                
// Here is the rest of my file (if it can help)                

            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server: {
        watch: {
          usePolling: true,
        }
    },
});