Failed to find '~nprogress/nprogress.css' after use postcss-import

[iliuyt]

1、vue init webpack test
2、npm install nprogress
3、edit main.js

import NProgress from 'vue-nprogress'

...
...

new Vue({
nprogress: new NProgress({
    parent: '.nprogress-container'
}),

..........

}).$mount('#app')

4、edit App.vue

import NprogressContainer from 'vue-nprogress/src/NprogressContainer'
.....

export default {
    name: 'app',
    components: {
        NprogressContainer
    }
    ....
}

5、npm run dev

ERROR

Module build failed: Error: Failed to find '~nprogress/nprogress.css'

[dev1337]

Facing the same problem.

[qgliu]

same here

[dev1337]

Fixed it by going to the original Nprogress repository and take the .css file from there.

[alexsandro-xpt]

Same erro here, it is a problem.

[rmotzko]

Same issue here.

[asyalas]

it works ,if you use vue-cli ,just npm i -D stylus-loader , or you should add stylus-loader in webpack.config.js ,

[alexsandro-xpt]

I don't remember how I fix this issue, but only diff thing I see is that now, I import it like that import NProgress from 'vue-nprogress';

[stefanDeveloper]

Yep I also have the same issue and I didn't figured it out, how to solve it...

[gabfr]

For those like me who didn't manage to get this working, there is a pretty neat plug-and-play alternative progress bar for vue: https://github.com/hilongjw/vue-progressbar#vue-router

[DominusKelvin]

I fixed mine by removing the tilde(~) from the NProgressContainer import of nprogress/nprogress.css. I guess the developer was using a MAC.

[etobdc]

You can fix it by importing the css file:

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

[faiyazalam]

I have this working in my app.css file:
@import "~nprogress/nprogress.css";