Vue Css Modules

A Laravel Mix extension for css modules support.
latest v3.0.0 - released
asuramus
12 downloads last week
MIT license
10 versions
css-modules
vue-css-modules
modules

Laravel Mix Vue Css Modules
npm npm

Add support for css module laravel mix.

Installation

npm i laravel-mix-vue-css-modules --save-dev

Recommended v3

Example

Laravel Mix Laravel Mix Vue CSS Modules Pre-Processor Install command
v5 v2 SCSS npm install [email protected]
v5 v3 SCSS, LESS, STYLUS npm install [email protected]

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>

And that's it. you ready to go.

Opt-in Usage

If you only want to use CSS Modules in some of your Vue components, you can set oneOf to true

mix.vueCssModules({ oneOf: true });

Pre-Processors

CSS Modules can be used along with other pre-processors. default pre-processor is enable. to disable it set preProcessor to false

mix.vueCssModules({ preProcessor: false });

Custom localIdentName

Default:

  • [path][name]__[local] for development
  • [hash:base64] for production
mix.vueCssModules({
  cssLoaderOptions: { localIdentName: "[path][name]__[local]" },
});

or you can use react or discord localIdentName

mix.vueCssModules({ localIdentNameType: "react" });

Enable sourceMap

Default: false

mix.vueCssModules({ cssLoaderOptions: { sourceMap: true } });

Set importLoaders

Default: 1

mix.vueCssModules({ cssLoaderOptions: { importLoaders: 2 } });

Exclude css

you may want some of your css exluded from generated class by css module.

const getLocalIdent = require("css-loader/lib/getLocalIdent");

mix.vueCssModules({
  cssLoaderOptions: {
    getLocalIdent: (context, localIdentName, localName, options) => {
      return context.resourcePath.includes("x.scss")
        ? localName
        : getLocalIdent(context, localIdentName, localName, options);
    },
  },
});