Working with vue & css module is USELESS at least for me, please don't use css module it's only wasting your time!.
Add support for css module laravel mix.
npm i laravel-mix-vue-css-modules --save-dev
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 |
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.
If you only want to use CSS Modules in some of your Vue components, you can set oneOf
to true
mix.vueCssModules({ oneOf: true });
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 });
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" });
Default: false
mix.vueCssModules({ cssLoaderOptions: { sourceMap: true } });
Default: 1
mix.vueCssModules({ cssLoaderOptions: { importLoaders: 2 } });
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);
},
},
});