File tree Expand file tree Collapse file tree 1 file changed +28
-16
lines changed Expand file tree Collapse file tree 1 file changed +28
-16
lines changed Original file line number Diff line number Diff line change @@ -8,15 +8,9 @@ Add supprt for css module.
8
8
npm install laravel-mix-vue-css-modules --save
9
9
```
10
10
11
- or
12
-
13
- ```
14
- yarn add laravel-mix-vue-css-modules
15
- ```
16
-
17
11
## Usage
18
12
19
- Your ` webpack.mix.js ` could look like this:
13
+ First, VueCssModules must be enabled. Your ` webpack.mix.js ` could look like this:
20
14
21
15
``` js
22
16
const mix = require (" laravel-mix" );
@@ -25,20 +19,38 @@ require("laravel-mix-vue-css-modules");
25
19
mix .vueCssModules ();
26
20
```
27
21
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
+ ```
29
34
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 >
35
43
```
36
44
37
- switch mode
45
+ ## Parameters
38
46
39
47
```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
+ });
42
54
```
43
55
44
56
## Author
You can’t perform that action at this time.
0 commit comments