Laravel Mix Vue Css Modules
Add support for css module laravel mix. CSS, SCSS, LESS & STYLUS
Installation
npm i laravel-mix-vue-css-modules
Usage
First, VueCssModules must be enabled. Your webpack.mix.js
could look like this:
const mix = ;; mix;
Then, add the module attribute to your <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;
Custom Injectname
<style module="$cssA"> /* identifiers injected as $cssA */</style> <style module="$cssB"> /* identifiers injected as $cssB */</style>
Pre-Processors
By default all pre-processors are disabled.
For Scss
mix;
For Less
npm i less less-loader --save-dev
then set less
to true
mix;
For Stylus
npm i stylus stylus-loader --save-dev
then set stylus
to true
mix;
Custom localIdentName
Default:
[path][name]__[local]
for development[hash:base64]
for production
mix;
or you can use react or discord localIdentName
mix;
Enable sourceMap
Default: false
mix;
Set importLoaders
Default: 1
mix;
Exclude
mix;
Exclude css
you may want some of your css exluded from generated class by css module.
const getLocalIdent = ; mix;
Example
<script>export default {};</script> <template> <div> <span class="blue">css scoped</span> <span :class="$css.blue">css module</span> <span class="red">scss scoped</span> <span :class="$scss.red">scss module</span> <span class="green">less scoped</span> <span :class="$less.green">less module</span> <span class="indigo">stylus scoped</span> <span :class="$stylus.indigo">stylus module</span> </div></template> <style scoped>.blue { color: blue;}</style> <style module="$css">.blue { color: blue;}</style> <style lang="scss" scoped>@mixin my-color($color) { color: $color;} .red { @include my-color(red);}</style> <style lang="scss" module="$scss">@mixin my-color($color) { color: $color;} .red { @include my-color(red);}</style> <style lang="less" scoped>@color: green; .green { color: @color;}</style> <style lang="less" module="$less">@color: green; .green { color: @color;}</style> <style lang="stylus" scoped>my-color() color: arguments .indigo my-color: indigo</style> <style lang="stylus" module="$stylus">my-color() color: arguments .indigo my-color: indigo</style>