Laravel Mix Vue Css Modules

Add supprt for css module.

Installation

npm install laravel-mix-vue-css-modules --save

Usage

First, VueCssModules must be enabled. Your webpack.mix.js could look like this:

const mix = require("laravel-mix");
require("laravel-mix-vue-css-modules");

mix.vueCssModules();

Then, add the module attribute to your <style>

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

You can then use it in your templates with a dynamic class binding:

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

Parameters

// localIdentName: '[local]_[hash:base64:8]'
// mode
mix.vueCssModules({
  localIdentName: "[name]__[local]___[hash:base64:5]",
  mode: "local",
});

Author

Aslam FullStack Web developer