CSS minification error in npm run build [vue.js]

Question

Im receiving this error everytime I try to run 'npm run build' and I dont have any css file.

ERROR Error: CSS minification error: Unexpected ":" found.. File: css/app.86f0ef2e.css

Error: CSS minification error: Unexpected ":" found.. File: css/app.86f0ef2e.css at C:\Users\LesterKingsley\OneDrive\Desktop\vuewuna\dos\node_modules@intervolga\optimize-cssnano-plugin\index.js:106:21 at processTicksAndRejections (internal/process/task_queues.js:97:5) at async Promise.all (index 0)

I'm new to vue, I don't have a clue to solve this problem.

Answer 1

I faced this same error last week, and this is my solution to it. I'm not sure if it's going to work for you though. What I did basically was these;

• I found and removed the file that course the error (in my case public/css/argon.css) then I cut out all the codes inside of that file and saved.
• Then I ran npm run build and it built successfully.
• After the build process had completed, I then pasted the codes inside of the file (in my case dist/css/argon.css) and the vuejs created css. That solved the problem. Pls give a thumbs up if that works for you.

Answer 2

The problem is sometimes in the ::v-deep label:

// WRONG:
::v-deep(.some-class) { ... }

// READY:
::v-deep .some-class { ... }

Answer 3

Please comment all your internal css. This work for me successfully.

I too did not have any external css file. But the issues were in my internal files.

This is the line that cause the error text-align: calc();

Answer 4

I got this error. For me the problem was this:

input['text'], 
input['email'] {
    user-select: initial;
}