Skip to content

Commit 4d9da58

Browse files
committed
🎉 Initial commit
1 parent 17c814d commit 4d9da58

File tree

1 file changed

+28
-16
lines changed

1 file changed

+28
-16
lines changed

README.md

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,9 @@ Add supprt for css module.
88
npm install laravel-mix-vue-css-modules --save
99
```
1010

11-
or
12-
13-
```
14-
yarn add laravel-mix-vue-css-modules
15-
```
16-
1711
## Usage
1812

19-
Your `webpack.mix.js` could look like this:
13+
First, VueCssModules must be enabled. Your `webpack.mix.js` could look like this:
2014

2115
```js
2216
const mix = require("laravel-mix");
@@ -25,20 +19,38 @@ require("laravel-mix-vue-css-modules");
2519
mix.vueCssModules();
2620
```
2721

28-
custom localIdentName
22+
Then, add the module attribute to your `<style>`
23+
24+
```css
25+
<style module>
26+
.red {
27+
color: red;
28+
}
29+
.bold {
30+
font-weight: bold;
31+
}
32+
</style>
33+
```
2934

30-
```js
31-
// DEFAULT localIdentName: '[local]_[hash:base64:8]'
32-
mix.vueCssModules({
33-
localIdentName: "[name]__[local]___[hash:base64:5]",
34-
});
35+
You can then use it in your templates with a dynamic class binding:
36+
37+
```vue
38+
<template>
39+
<p :class="$style.red">
40+
This should be red
41+
</p>
42+
</template>
3543
```
3644

37-
switch mode
45+
## Parameters
3846

3947
```js
40-
// default global
41-
mix.vueCssModules({ mode: "local" });
48+
// localIdentName: '[local]_[hash:base64:8]'
49+
// mode
50+
mix.vueCssModules({
51+
localIdentName: "[name]__[local]___[hash:base64:5]",
52+
mode: "local",
53+
});
4254
```
4355

4456
## Author

0 commit comments

Comments
 (0)