Skip to content

Commit 61fbdbb

Browse files
committed
Update all functions
1 parent 44e96fe commit 61fbdbb

File tree

1 file changed

+51
-11
lines changed

1 file changed

+51
-11
lines changed

README.md

Lines changed: 51 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,13 @@ You can then use it in your templates with a dynamic class binding:
3636

3737
```vue
3838
<template>
39-
<p :class="$style.red">
40-
This should be red
41-
</p>
39+
<p :class="$style.red">This should be red</p>
4240
</template>
4341
```
4442

45-
## Opt-in Usage
43+
And that's it. you ready to go.
44+
45+
#### Opt-in Usage
4646

4747
If you only want to use CSS Modules in some of your Vue components, you can set `oneOf` to `true`
4848

@@ -52,21 +52,61 @@ mix.vueCssModules({ oneOf: true });
5252

5353
#### Pre-Processors
5454

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+
5557
```js
56-
// <style lang="scss" module>
57-
mix.vueCssModules({ sass: true });
58+
mix.vueCssModules({ preProcessor: false });
5859
```
5960

6061
#### Custom localIdentName
6162

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+
6276
```js
63-
// DEFAULT: '[local]_[hash:base64:8]'
64-
mix.vueCssModules({ localIdentName: "[name]__[local]___[hash:base64:5]" });
77+
mix.vueCssModules({ localIdentNameType: "react" });
6578
```
6679

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.
6899

69100
```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+
});
72112
```

0 commit comments

Comments
 (0)