Issue when importing the style

[kidii]

ERROR in ./~/vue-nav-tabs/themes/vue-tabs.css Module parse failed: /Applications/MAMP/htdocs/master/node_modules/vue-nav-tabs/themes/vue-tabs.css Unexpected token (1:0) You may need an appropriate loader to handle this file type.	.vue-tabs.stacked {	display: flex; }

@ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/ServiceModule/_EditWorksheet.vue 10:0-41 @ ./resources/assets/js/components/ServiceModule/_EditWorksheet.vue @ ./resources/assets/js/app.js

[cristijora]

Hi @kidii Can you tell me please what is your webpack setup ?

[kidii]

Hi!

var elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

elixir(mix => { mix.sass('app.scss') .styles('custom.css', 'public/css/all.css') .copy( 'node_modules/bootstrap-sass/assets/fonts/bootstrap', 'public/fonts/bootstrap') .webpack('app.js') .scripts([ 'bootstrap-notify.min.js' ]); });

[cristijora]

hm do you know if you have a css-loader setup ? Do you have other places where you import css ? (bootstrap css for example?) Do you have a webpack.config somewhere? Worst case you could import the css inside some style tag of some .vue component.

[kidii]

I think, I haven't. No, I don't import any css.

[cristijora]

Try with

mix.copy('node_modules/vue-nav-tabs/themes/vue-tabs.css', 'public/css/vue-tabs.css');

<link rel="stylesheet" href="{{ elixir('css/vue-tabs.css') }}">

I might be wrong since I'm not a laravel user. If this doesn't work you need to find out how to import css or add a css-loader in laravel You could also

app.vue

<style src="path_to_vue-tabs-css"></style>

[kidii]

Nope. But thanks for helping! :)

[cristijora]

https://stackoverflow.com/questions/31547729/laravel-5-elixir-how-to-reference-a-css-file-from-node-modules-directory I see people use the copy option.

[cristijora]

Closing as it's not related to vue-tabs