How can I debug "Error: Expected a backslash preceding the semicolon"?

Viewed 130

I have been working on this project for a while and this error never happened to me. I did some changes, removed the changes and went back in the commit history. The error is still there no matter what version I use.

The error happens when I run "vite dev" or "vite build" (via "npm run dev" or "npm run build").

I am running Vite in Laravel 9.

Here's the problematic file according to the console:

@tailwind base;
@tailwind components;
@tailwind utilities;

@media print {
    body {
        visibility: hidden;
    }

    .print {
        visibility: visible;
    }
}

The error goes away when I remove the first three lines.

How can I find the "bad" line of code and fix it?

Here is my package.json:

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.4",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.7",
        "axios": "^0.25",
        "laravel-vite-plugin": "^0.2.1",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.6",
        "vite": "^2.9.11"
    }
}

And here is my vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};
0 Answers
Related