Home

I’ve followed the instructions in the documentation, and I run into the same issue as #380. I’ve done some testing, but can’t nail down what the issue is (the error is exactly the same as the closed issue).

Here is the steps I’ve taken:

1. vue init nuxt/starter test
2. cd test
3. npm install
4. npm install --save bulma font-awesome node-sass sass-loader vue-bulma-breadcrumb (verified pre-processor instructions from https://nuxtjs.org/faq/pre-processors)
5. Added { src: 'bulma', lang: 'sass' } as shown in https://nuxtjs.org/api/configuration-css
6. npm run dev Everything works fine.
7. Modify default layout to import Breadcrumb from 'vue-bulma-breadcrumb' and added Breadcrumb under components.

At this point, I get the same error as in #380.

Unexpected character ‘@’ (1:0)
You may need an appropriate loader to handle this file type.
| @import ‘~bulma/sass/utilities/functions’;
| @import ‘~bulma/sass/utilities/variables’;

However, if I go and copy the vue file from the module into a component, and load that instead of vue-bulma-breadcrumb it works just fine. Modifying the template to actually reference the Breadcrumb component, it works just fine.

My conclusion is there is something wrong with the configuration that is preventing it from loading from node_modules properly. I’m digging around and exploring for a resolution. In the mean time, I figure someone else may find the fix quicker. This happens with vue-bulma-tooltip as well, but I didn’t explore any other packages.

Is there a step that is being missed or is this a webpack configuration issue?