CODEWITHSUNDEEP
vue.jssassmodulelaravel-mixsass-loader
Arturokin12
Arturokin12

Reputation: 89

use scss style module compiling in laravel-mix vue?

i have a modularized template that uses Sass-loader to compile scss files that every component has, but using this in laravel with laravel-mix won't work, that doens't do nothing

i'm using the newest version of laravel (5.8) with php7 and Vue JS

example of component: 

    <template>
       <div :class="$style.logo">
          <div :class="$style.logoContainer">
            <img
              v-if="!settings.isMenuCollapsed || withDrawer"
              src="resources/images/logo-inverse.png"
              alt
            >
            <img
              v-if="settings.isMenuCollapsed && !withDrawer"
              src="resources/images/logo-inverse-mobile.png"
              alt
            >
          </div>
        </div>
    </template>

    <style lang="scss" module>
    @import "./style.module.scss";
    </style>

here is a component with his style.scss file to be compiled as module. Classes in here must be saved into $style.

i use this packages in package.json:

"sass": "^1.15.2",
"sass-loader": "^7.1.0"

My babel.config.js:

module.exports = {
  presets: ['@vue/app'],
  plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true },
    ],
  ],
}

and finally, my webpack.mix.js file:

const mix = require('laravel-mix');
require('laravel-mix-alias');

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "sass-loader",
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    }
});

mix.alias({
    '@': '/resources/js'
})

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

the thing is, that classes into scss files of components are not compiled, and because of that, html tags after compilation do not possess styles, loosing al the structure of my template.

this has to be the compiled file component:

<div class="index_logo_hObJ1">
    <div class="index_logoContainer_1zCMH">
        <img src="resources/images/logo-inverse.png" alt="">
    </div>
</div>

and this is what i get:

<div>
    <div>
        <img src="resources/images/logo-inverse.png" alt="">
    </div>
</div>

As you can see, no classes were injected into divs, and i get no errors on compiling, what am i doing wrong?

Upvotes: 1

Views: 3262

Answers (1)

Arturokin12
Arturokin12

Reputation: 89

i didn't use the style "module", i couldn't figure that out, but i manage to use style "scoped", it's close to it. To do so i added this to my webpack.mix.js file: 

let mix = require('laravel-mix');
require('laravel-mix-alias');

mix.alias({
    '@': '/resources/js'
})

mix
    .setPublicPath('./default/public')
    .js('resources/js/app.js', 'default/public/javascript/')
    .sass('resources/sass/app.scss', 'default/public/css/')    
    .sourceMaps()
    .version();
;

mix.options({
    extractVueStyles: true,
    processCssUrls: false
});

and then you can use this on your .vue components:

<style lang="scss">
    @import "./style.module.scss";
</style>

and the .css file it's just normal.

Upvotes: 1

Related Questions