CODEWITHSUNDEEP
vue.jswebpacktailwind-cssfilepond
ArcticMediaRyan
ArcticMediaRyan

Reputation: 885

adding css causes failed build with Vue and Filepond

So, I am trying to follow a number of the file pond example and each of them include some form of CSS import (I get it, there is a lot that comes with beauty). However, no matter what I try, Filepond or Pintura (formerly Doka), I get this error in some form:

Compiled with problems:

ERROR in ./node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css

Module build failed (from ./node_modules/style-loader/dist/cjs.js):
ValidationError: Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
 - options should be an object:
   object { injectType?, attributes?, insert?, base?, esModule?, modules? }
    at validate (/Users/ryanolson/github/realkinkmen/node_modules/style-loader/node_modules/schema-utils/dist/validate.js:105:11)
    at Object.loader (/Users/ryanolson/github/realkinkmen/node_modules/style-loader/dist/index.js:25:29)


ERROR in ./node_modules/filepond/dist/filepond.min.css

Module build failed (from ./node_modules/style-loader/dist/cjs.js):
ValidationError: Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
 - options should be an object:
   object { injectType?, attributes?, insert?, base?, esModule?, modules? }
    at validate (/Users/ryanolson/github/realkinkmen/node_modules/style-loader/node_modules/schema-utils/dist/validate.js:105:11)
    at Object.loader (/Users/ryanolson/github/realkinkmen/node_modules/style-loader/dist/index.js:25:29)

I have NO IDEA how to fix this as I am not experienced enough with what would be going on. I am guessing it has to do with Webpack and build but no idea what I need to do to fix it. Any help?

I also want to mention this is a Laravel/VueJS/Tailwind stack

Upvotes: 1

Views: 711

Answers (1)

ArcticMediaRyan
ArcticMediaRyan

Reputation: 885

The solution is to add the CSS files to the app.css file under /resources/css/app.css

@import 'filepond/dist/filepond.min.css';
@import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";

Upvotes: 1

Related Questions