css @import "~font-awesome/.." is broken in RC

[appinteractive]

After the update to RC I cant Import Node Modules anymore the standard way with @import "~font-awesome/... but have to remove it @import "font-awesome/.... But this behavior breaks all other stuff that is relying on the standard way. In our case we use vue-styleguidist which than can't resolve the scss imports anymore (uses it's own webpack config).

I tried to fix that with the webpack alias but can't find any way that satisfies both.

_{This question is available on Nuxt.js community (#c1293)}

[Atinux]

Hi @appinteractive

This is related to #1435, sass-loader depends on css-loader and for rc5 & rc6, we used ~ as root so @import "~font-awesome/... was resolved from srcDir, will be fixed in new release.

[appinteractive]

Thanks Sébastien, saw that issue and was already wondering if it's related.

[Atinux]

Should work with rc7 even if the PR has not been merged, please make sure to rm -rf node_modules/ && npm install to be sure that it's a clean install.

[appinteractive]

@Atinux thats not fixing my issue:
Module build failed: Error: Failed to find '~font-awesome/css/font-awesome.min.css'

But I guess I have to wait for the Fix webpack-contrib/css-loader#597

[pi0]

Should be finally fixed with rc8 🎉

https://github.com/nuxt/nuxt.js/releases/tag/v1.0.0-rc8

[appinteractive]

Still that issue exists! When you try to import @import "~font-awesome/... you always get errors:

Module build failed: Error: Failed to find '~font-awesome/css/font-awesome.min.css'
    in [ 
        /Users/Greg/Projekte/HumanConnection/hc-frontend-nuxt/assets/styles,
        /Users/Greg/Projekte/HumanConnection/hc-frontend-nuxt,
        /Users/Greg/Projekte/HumanConnection/hc-frontend-nuxt,
        /Users/Greg/Projekte/HumanConnection/hc-frontend-nuxt/node_modules
    ]
    at /Users/Greg/Projekte/HumanConnection/hc-frontend-nuxt/node_modules/postcss-import/lib/resolve-id.js:48:11
    at <anonymous>

 @ ./assets/styles/main.scss 4:14-199 13:3-17:5 14:22-207
 @ ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":["/Users/Greg/Projekte/HumanConnection/hc-frontend-nuxt/node_modules/babel-preset-vue-app/dist/index.common.js"]}!./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&timeout=3000&path=/__webpack_hmr ./.nuxt/client.js

[uptownhr]

i can also confirm this issue with trying to load flatpickr.min.css

@import '~flatpickr/dist/flatpickr.min.css'

[uptownhr]

@import '~/node_modules/flatpickr/dist/flatpickr.min.css';

also not working. what are the rules for ~ in style area?

[clarkdo]

@uptownhr @appinteractive Can you have a try on 1.0.0 ? If issue still existed, pls provide a repo.

[rafaesc]

Hi @abalabahaha,

there is an example with vue-styleguidist and nuxtjs,
https://github.com/vue-styleguidist/vue-styleguidist/tree/master/examples/nuxtjs

I hope it helps you.

[clarkdo]

By default postcss-import is enabled for inlining @import rules content, so you should use font-awesome/... because postcss-import won't resolve ~, or you can disable postcss-import in build.postcss, then you can use ~/font-awesome/....

[lock]

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.