webpack: Error with image paths (SASS files)
Hey,
I installed sass-loader and sass-node and everthing works fine, but I have problems with my image paths. I always get this error: Module not found: Error: Can't resolve './assets/images/background_test.jpg' in 'D:\webprojects\gs-portfolio\src\components\pages' @ ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-44c827be!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/pages/Home.vue 6:73-119
This is my folder structure: assets -images –background_test.jpg -styles –main.scss
I didn’t changed my webpack config file, I’m very in webpack.
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 16 (3 by maintainers)
I was having the same problem, until i realised that I need to use a tilde (
~/
) in all (S)CSS references instead of (./
). This is not well documented in the Vue CLI chapter on static assets.since the component is in the
/components
directory, the path should be:../assets/images/background_test.jpg
(notice the two dots)just try like below. You should add ‘/’ before assets folder (If it is assets folder)
eg. src=“/assets/images/sss.jpg”
I have a similar error with vue-style-loader. Searches show it is webpack. Cannot find ‘module’ when trying to load background image from css/scss as @dimirc. It’s being HOURS and many searches. I don’t know why the example in vue.js package weren’t included?
Two dots same error!
Well, your component is nested 2 folders deep (
/components/pages
), so you need../../
to get back to/src
.Please read up on relative paths.
Had the same issue when integrating vue-styleguide with some components that required some fonts from sass file. The solution provided by @mlachance did the trick for me.
For anyone using sass-loader and separate css file (not inside a
.vue
), the correct solution is what @mlachance wrote. Say your image issrc/assets/image.png
and your stylesheet issrc/style/style.scss
, this will work:if help check this out https://github.com/vuejs-templates/webpack/issues/208#issuecomment-279959781
I have the same problem, I tried to replicate the problem in the project https://github.com/joohncruz/poc-vuejs-webpack-global-style.
styles.scss $auxiliary-color: #1EB6CD ;
.teste-url { background: $primary-color; background-image: url(‘./assets/icons/ico_atalho.png’): }
Error response:
url(‘./assets/icons/ico_atalho.png’): Error response