https://github.com/aslam97/laravel-mix-vue-css-modules
Laravel mix vue css modules
https://github.com/aslam97/laravel-mix-vue-css-modules
css-modules laravel-mix-plugin laravel-mix-vue-css-modules
Last synced: about 1 year ago
JSON representation
Laravel mix vue css modules
- Host: GitHub
- URL: https://github.com/aslam97/laravel-mix-vue-css-modules
- Owner: Aslam97
- License: mit
- Created: 2020-08-21T16:28:29.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-02-07T10:10:43.000Z (over 4 years ago)
- Last Synced: 2025-04-26T11:16:35.879Z (about 1 year ago)
- Topics: css-modules, laravel-mix-plugin, laravel-mix-vue-css-modules
- Language: JavaScript
- Homepage:
- Size: 38.1 KB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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
Add support for css module laravel mix.
## Installation
```
npm i laravel-mix-vue-css-modules --save-dev
```
## Recommended v3
[Example](https://github.com/Aslam97/laravel-mix-vue-css-modules/tree/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](https://github.com/Aslam97/laravel-mix-vue-css-modules/tree/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:
```js
const mix = require("laravel-mix");
require("laravel-mix-vue-css-modules");
mix.vueCssModules();
```
Then, add the module attribute to your ``
```css
<style module>
.red {
color: red;
}
.bold {
font-weight: bold;
}
```
You can then use it in your templates with a dynamic class binding:
```vue
This should be red
```
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`
```js
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`
```js
mix.vueCssModules({ preProcessor: false });
```
#### Custom localIdentName
Default:
- `[path][name]__[local]` for development
- `[hash:base64]` for production
```js
mix.vueCssModules({
cssLoaderOptions: { localIdentName: "[path][name]__[local]" },
});
```
or you can use **react** or **discord** localIdentName
```js
mix.vueCssModules({ localIdentNameType: "react" });
```
#### Enable sourceMap
Default: `false`
```js
mix.vueCssModules({ cssLoaderOptions: { sourceMap: true } });
```
#### Set importLoaders
Default: `1`
```js
mix.vueCssModules({ cssLoaderOptions: { importLoaders: 2 } });
```
#### Exclude css
you may want some of your css exluded from generated class by css module.
```js
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);
},
},
});
```