Nuxt.js: [css-loader] Problem with static files

[krasevych]

Hi,
I have a code:

@font-face {
  font-family: icomoon;
  src: url('/fonts/icomoon/icomoon.woff2') format('woff2');

  font-weight: normal;
  font-style: normal;
}

After I updated Nuxt from 0.10.6 to rc5 I got an error:(before update it works)

 in ./node_modules/css-loader?{"minimize":true,"importLoaders":1,"sourceMap":true,"root":"~","alias":{"/static":"D://Projects//Vue//***//src//static","/assets":"D://Projects//Vue//***//src//assets"}}!./node_modules/postcss-loader/lib?{"sourceMap":true,"plugins":[null,null,{"version":"6.0.9","plugins":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"postcssPlugin":"postcss-cssnext","postcssVersion":"6.0.9"}]}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./src/css/main.scss
Module not found: Error: Can't resolve 'fonts/icomoon/icomoon.woff2' in 'D:\Projects\Vue\Smart Landing\smart-landing-client\src\css'
 @ ./node_modules/css-loader?{"minimize":true,"importLoaders":1,"sourceMap":true,"root":"~","alias":{"/static":"D://Projects//Vue//***//src//static","/assets":"D://Projects//Vue//***//src//assets"}}!./node_modules/postcss-loader/lib?{"sourceMap":true,"plugins":[null,null,{"version":"6.0.9","plugins":[null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null],"postcssPlugin":"postcss-cssnext","postcssVersion":"6.0.9"}]}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./src/css/main.scss 6:140737-140775
 @ ./src/css/main.scss
 @ ./node_modules/babel-loader/lib?{"presets":["vue-app","stage-0","es2015"],"plugins":["transform-decorators-legacy","transform-class-properties"],"babelrc":false,"cacheDirectory":true}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./.nuxt/App.vue
 @ ./.nuxt/App.vue
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true ./.nuxt/client.js

_{This bug report is available on Nuxt.js community (#c1277)}

[pi0]

Hi. This is because rc5 tries to correctly load and hash font assets. If not is inside assets, please use '~/assets/fonts/..` instead.

PS: Are you using custom postcss rules?

[krasevych]

@pi0 thank you for your answer, but the fonts are placing in static/, and ~/static/fonts/.. doesn't work

[hendrysadrak]

Even if inside ~/assets it doesn't work if there is a space inside font file name (i.e. Averta Bold.otf)

[Atinux]

Hi @krasevych

Indeed it's because of css-loaders aliases, I'm looking at it.

[Atinux]

I updated the css-loader to handle aliases starting with /, let's hope it could be merged pretty fast!

See https://github.com/webpack-contrib/css-loader/pull/597

[fbrbovic]

Any update on this ? I have same problem and can't use rc5 now

[Atinux]

Fixed with rc7, see https://github.com/nuxt/nuxt.js/issues/1453#issuecomment-325643322

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.