@@ -36,13 +36,13 @@ You can then use it in your templates with a dynamic class binding:
36
36
37
37
```vue
38
38
<template >
39
- <p :class="$style .red">
40
- This should be red
41
- </p >
39
+ <p :class="$style .red"> This should be red</p >
42
40
</template >
43
41
```
44
42
45
- ## Opt-in Usage
43
+ And that's it. you ready to go.
44
+
45
+ #### Opt-in Usage
46
46
47
47
If you only want to use CSS Modules in some of your Vue components, you can set `oneOf` to `true`
48
48
@@ -52,21 +52,61 @@ mix.vueCssModules({ oneOf: true });
52
52
53
53
#### Pre-Processors
54
54
55
+ CSS Modules can be used along with other pre-processors. for now only ** SCSS** and by default pre-processor is enable. to disable it set ` preProcessor ` to ` false `
56
+
55
57
``` js
56
- // <style lang="scss" module>
57
- mix .vueCssModules ({ sass: true });
58
+ mix .vueCssModules ({ preProcessor: false });
58
59
```
59
60
60
61
#### Custom localIdentName
61
62
63
+ Default:
64
+
65
+ - use ` '[path][name]__[local] ` for development
66
+ - use ` '[hash:base64]' ` for production
67
+
68
+ ``` js
69
+ mix .vueCssModules ({
70
+ cssLoaderOptions: { localIdentName: " [path][name]__[local]" },
71
+ });
72
+ ```
73
+
74
+ or you can use ** react** or ** discord** localIdentName
75
+
62
76
``` js
63
- // DEFAULT: '[local]_[hash:base64:8]'
64
- mix .vueCssModules ({ localIdentName: " [name]__[local]___[hash:base64:5]" });
77
+ mix .vueCssModules ({ localIdentNameType: " react" });
65
78
```
66
79
67
- #### Local mode
80
+ #### Enable sourceMap
81
+
82
+ Default: ` false `
83
+
84
+ ``` js
85
+ mix .vueCssModules ({ cssLoaderOptions: { sourceMap: true } });
86
+ ```
87
+
88
+ #### Set importLoaders
89
+
90
+ Default: ` 1 `
91
+
92
+ ``` js
93
+ mix .vueCssModules ({ cssLoaderOptions: { importLoaders: 2 } });
94
+ ```
95
+
96
+ #### Exclude css
97
+
98
+ you may want some of your css exluded from generated class by css module.
68
99
69
100
``` js
70
- // DEFAULT: global
71
- mix .vueCssModules ({ mode: " local" });
101
+ const getLocalIdent = require (" css-loader/lib/getLocalIdent" );
102
+
103
+ mix .vueCssModules ({
104
+ cssLoaderOptions: {
105
+ getLocalIdent : (context , localIdentName , localName , options ) => {
106
+ return context .resourcePath .includes (" x.scss" )
107
+ ? localName
108
+ : getLocalIdent (context, localIdentName, localName, options);
109
+ },
110
+ },
111
+ });
72
112
```
0 commit comments