CODEWITHSUNDEEP
sassvitelaravel-9
Angelo Dionisio
Angelo Dionisio

Reputation: 1

net::ERR_ABORTED 404 (Not Found) Getting Resources From Vite

I recently included vite to my existing laravel 9 project to import sass file from the bootstrap template,

I installed vite, bootstarp sass preprocessor, and i always got thos error from google chrome console,

GET http://127.0.0.1:8000/css/styles.css net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:4          
GET http://127.0.0.1:8000/js/main.js net::ERR_ABORTED 404 (Not Found)
127.0.0.1/:604          
GET http://127.0.0.1:8000/js/scripts.js net::ERR_ABORTED 404 (Not Found)

It cannot load my sass file, even the scripts

This is my vite.config.js

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

const path = require('path')

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/sass/styles.scss'

            ],
            refresh: true,
        }),
    ],
    root: path.resolve(__dirname, 'src'),
    resolve: {
      alias: {
        '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
      }
    },
    server:{
        host:'127.0.0.1'
    }
});

This is my home.blade.php where i want to call my resources

<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="module" src="./js/main.js"></script>
       </script>
       ="stylesheet" />
    </head>

my app.js

import './bootstrap';

import '../sass/styles.scss'

import * as bootstrap from 'bootstrap'

I expected that sass will compile and will output css and apply to the client side I already run

npm run dev npm run build

Upvotes: 0

Views: 4969

Answers (1)

Satya
Satya

Reputation: 546

Try this,

Goto app.blade.php

remove this code

@vite(['resources/css/app.css', 'resources/js/app.js'])

And, add this code

<link rel="stylesheet" href="{{ asset('css/app.css') }}">

Upvotes: 1

Related Questions