Remove jquery and bootstrap package.json

I need to remove jquery, bootstrap and popper from my dependencies, I will only use vuejs.

But when I remove the package.json and run the npm run watch, the following error appears:

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
8 │ @import '~ bootstrap / scss / bootstrap';
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵

How do I solve this?

jlrdw

5 years ago

Level 75

You don't have to remove it just adjust that package. Json to what you want in it. I suggest including axios.

mvnobrega

5 years ago

Level 3

But the problem is that when running npm run watch, jquery is added together with vuejs in app.js, leaving the file heavy.

I just need vuejs and axios in app.js

My Dependencies:

    "devDependencies": {
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }

jlrdw

5 years ago

Level 75

You probably need to come up with your own custom app Js.

Two paragraphs here https://laravel.com/docs/7.x/frontend#writing-javascript explain this.

1 like

BryanK

5 years ago

Best Answer

Level 16

Edit your resources\js\bootstrap.js file.

Remove/comment out what you don't need.

try {
    //window.$ = window.jQuery = require('jquery');

    //require('bootstrap');
} catch (e) {}

Edit your resources\sass\app.scss:

// Bootstrap
// @import '~bootstrap/scss/bootstrap';

No matter what is in your package.json file, it will only compile what you are including (and by default, jquery and bootstrap is included).

1 like

mvnobrega

5 years ago

Level 3

Thanks :)

Please or to participate in this conversation.