Sass not loading from Vue component when compiling with Laravel Mix

• Laravel Mix Version: 6.0.11
• Node Version (node -v): 14.15.4
• NPM Version (npm -v): 6.14.9
• webpack: 5.19.0
• webpack-cli: 4.4.0
• webpack-dev-server: 4.0.0-beta.0
• OS: Fedora 33

Description:

Hi everyone,

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?

P.S. 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>

Original post: https://laracasts.com/discuss/channels/elixir/sass-not-loading-from-vue-component-when-compiling-with-laravel-mix

Steps To Reproduce:

Include sass/scss style from the Vue component and see if it’s compiled.

[beaubus]

Hey @beaubus Did you figure out how to fix the globalStyles issue?

No, it was faster for me at that moment to just convert globalStyles to local styles.

[kranthiboga23]

@mdsaifurrahmann please refer following image, if i remove extractStyles/extractVueStyles. CSS is loading from .vue file(not optimizing - not loading from app.css) - but wokring as excepted

If i keep extractStyles/extractVueStyles. CSS is loading from minified file app.css but not extracting CSS/SCSS from .vue files into app.css