Vue Css Modules

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

Working with vue & css module is USELESS at least for me, please don't use css module it's only wasting your time!.

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 laravel-mix-vue-css-modules@2
v5 v3 SCSS, LESS, STYLUS npm install laravel-mix-vue-css-modules@3

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);
    },
  },
});