nprogress
nprogress copied to clipboard
Failed to find '~nprogress/nprogress.css' after use postcss-import
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'
Facing the same problem.
same here
Fixed it by going to the original Nprogress repository and take the .css file from there.
Same erro here, it is a problem.
Same issue here.
it works ,if you use vue-cli ,just npm i -D stylus-loader , or you should add stylus-loader in webpack.config.js ,
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';
Yep I also have the same issue and I didn't figured it out, how to solve it...
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
I fixed mine by removing the tilde(~) from the NProgressContainer import of nprogress/nprogress.css. I guess the developer was using a MAC.
You can fix it by importing the css file:
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
I have this working in my app.css file:
@import "~nprogress/nprogress.css";