Sass not loading from Vue component when compiling with Laravel Mix

Hi everyone,

Just upgraded to Laravel Mix 6 & Webpack 5 and have a problem with compiling. It finishes successfully but not including styles imported from withing Vue component. Specifically, I'm using Vue Splide adapter to display the slider on my main page and styling is broken.

I'm including styles like this:

// Slider component...
<style lang="scss">
    @import '~@splidejs/splide/dist/css/themes/splide-default.min.css';
</style>

// webpack.mix.js
mix.sass('resources/sass/app.scss', 'public/front/css')
   .js('resources/js/app.js', '')
   .vue()
   .alias({
     ziggy: path.resolve('vendor/tightenco/ziggy/src/js/route.js'),
     '@components': path.resolve(__dirname, 'resources/js/Components'),
     '@publicDir': path.resolve(__dirname, 'public')
   })
   .webpackConfig(config)
   .mergeManifest()
   .options({
     extractVueStyles: true,
   })
   .extract();

I tried without .options() also & still styles not included. But if I move @import '~@splidejs/splide/dist/css/themes/splide-default.min.css'; to app.scss slider styles are included.

I only need slider styles within the Slider component so it doesn't make sense for move styles to app.scss.

This thing was working on Mixv5/WP4.

Am I missing something?

dima23

5 years ago

Level 2

I've also modified .vue() with:

.vue({
    extractStyles: true,
})

But in this case app tries to load app.js with app.js?id=[chunkhash] which is equal to front0.js?id=[chunkhash] and I'm getting error loading chunk file.

I do see that app.css file is slightly bigger in this case, which means that slider styles are included there from vue component <style>

Please or to participate in this conversation.