Skip to content

Commit b652191

Browse files
RaphaelDDLRaphaelDDL
committed
css-module-issue
0 parents  commit b652191

23 files changed

+5462
-0
lines changed

‎.babelrc.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
module.exports = ({
2+
presets: [
3+
[
4+
'@babel/preset-env',
5+
{
6+
useBuiltIns: 'entry',
7+
shippedProposals: true,
8+
modules: false,
9+
corejs: '3.30.2'
10+
},
11+
],
12+
],
13+
plugins: [
14+
'@babel/plugin-syntax-dynamic-import',
15+
],
16+
});

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { createApp } from 'vue';
2+
import App from './src/app';
3+
createApp(App).mount("#app");

‎package-lock.json

+4,937
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "vue3-modules",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "./src/index.js",
6+
"scripts": {
7+
"start": "webpack serve --open --mode=development",
8+
"start:pepsi": "ENTRY_POINT=\"pepsi\" webpack serve --open --mode=development",
9+
"start:cocacola": "ENTRY_POINT=\"cocacola\" webpack serve --open --mode=development",
10+
"build": "webpack --mode=production --progress",
11+
"dist-clean": "rm -fr dist/*"
12+
},
13+
"author": "",
14+
"license": "ISC",
15+
"dependencies": {
16+
"@babel/core": "^7.21.8",
17+
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
18+
"@babel/plugin-transform-runtime": "^7.21.4",
19+
"@babel/preset-env": "^7.21.5",
20+
"@babel/runtime": "^7.21.5",
21+
"@types/webpack-env": "^1.18.0",
22+
"babel-loader": "^9.1.2",
23+
"core-js": "^3.30.2",
24+
"css-loader": "^6.7.3",
25+
"cssnano": "^6.0.1",
26+
"html-webpack-plugin": "^5.5.1",
27+
"mini-css-extract-plugin": "^2.7.5",
28+
"null-loader": "^4.0.1",
29+
"postcss-loader": "^7.3.0",
30+
"sass": "^1.62.1",
31+
"sass-loader": "^13.2.2",
32+
"simple-functional-loader": "^1.2.1",
33+
"style-loader": "^3.3.2",
34+
"vue": "^3.2.47",
35+
"vue-loader": "^17.1.0",
36+
"vue-style-loader": "^4.1.3",
37+
"webpack": "^5.82.0",
38+
"webpack-dev-server": "^4.15.0",
39+
"webpack-merge": "^5.8.0"
40+
},
41+
"devDependencies": {
42+
"webpack-cli": "^5.1.1"
43+
}
44+
}

‎src/app.vue

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<template>
2+
<div>
3+
<ul style="padding-left: 30px;">
4+
<li style="color:blue;">Blue: Bugged</li>
5+
<li style="color:green;">Green: default/nobrand</li>
6+
<li style="color:red;">Red: CocaCola</li>
7+
<li style="color:black;">Black: Pepsi</li>
8+
</ul>
9+
<hr>
10+
<brand />
11+
<hr>
12+
<brand-external />
13+
<brand-external-module />
14+
<hr>
15+
<module />
16+
<module-named />
17+
<module-nameless />
18+
<hr>
19+
<module-multiple />
20+
<module-multibrand />
21+
<hr>
22+
<module-named-multiple />
23+
<hr>
24+
<scoped />
25+
<scoped-brand />
26+
<scoped-named />
27+
<scoped-nameless />
28+
</div>
29+
</template>
30+
31+
<script>
32+
import brand from './components/brand';
33+
import brandExternal from './components/brand-external';
34+
import brandExternalModule from './components/brand-external-module';
35+
import module from './components/module';
36+
import moduleNamed from './components/module-named';
37+
import moduleMultiple from './components/module-multiple';
38+
import moduleMultibrand from './components/module-multibrand';
39+
import moduleNameless from './components/module-nameless';
40+
import moduleNamedMultiple from './components/module-named-multiple';
41+
import scoped from './components/scoped';
42+
import scopedBrand from './components/scoped-brand';
43+
import scopedNamed from './components/scoped-module-named';
44+
import scopedNameless from './components/scoped-module-nameless';
45+
46+
export default {
47+
name: 'App',
48+
components:{
49+
brand,
50+
brandExternal,
51+
brandExternalModule,
52+
module,
53+
moduleNamed,
54+
moduleNameless,
55+
moduleMultiple,
56+
moduleMultibrand,
57+
moduleNamedMultiple,
58+
scoped,
59+
scopedNamed,
60+
scopedNameless,
61+
scopedBrand,
62+
}
63+
};
64+
</script>
65+
66+
<style lang="scss">
67+
body {
68+
color: blue;
69+
}
70+
h2 {
71+
color: inherit;
72+
}
73+
</style>
74+

‎src/components/brand-external-module.vue

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<template>
2+
<h2 :class="$style.externalcss">brands external css module: (red | black)</h2>
3+
</template>
4+
5+
<style lang="scss" module brand="cocacola" src="../scss/externalcss-red.scss" />
6+
<style lang="scss" module brand="pepsi" src="../scss/externalcss-black.scss" />

‎src/components/brand-external.vue

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<template>
2+
<h2 class="externalcss">brands external css: (red | black)</h2>
3+
</template>
4+
5+
<style lang="scss" scoped brand="cocacola" src="../scss/externalcss-red.scss" />
6+
<style lang="scss" scoped brand="pepsi" src="../scss/externalcss-black.scss" />

‎src/components/brand.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<h2 class="brands">brand green-(red | black)</h2>
3+
</template>
4+
5+
<style lang="scss">
6+
.brands {
7+
color: green;
8+
}
9+
</style>
10+
11+
<style lang="scss" brand="cocacola">
12+
.brands {
13+
color: red;
14+
}
15+
</style>
16+
17+
<style lang="scss" brand="pepsi">
18+
.brands {
19+
color: black;
20+
}
21+
</style>

‎src/components/module-multibrand.vue

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<h2>
3+
module multi of same brand=>
4+
<span :class="$style.multibrand1">green-orange-purple</span> | <span :class="$style.multibrand2">pink-gray</span>
5+
</h2>
6+
</template>
7+
<style lang="scss" module>
8+
.multibrand1 {
9+
color: green;
10+
}
11+
</style>
12+
13+
<style lang="scss" module brand="cocacola">
14+
.multibrand1 {
15+
color: orange;
16+
}
17+
.multibrand2 {
18+
color: pink;
19+
}
20+
</style>
21+
22+
<style lang="scss" module brand="cocacola">
23+
.multibrand1 {
24+
color: purple;
25+
}
26+
// .multibrand2 {
27+
// color: gray;
28+
// }
29+
</style>

‎src/components/module-multiple.vue

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<h2>
3+
multiple module=>
4+
<span :class="$style.multi1">orange</span> | <span :class="$style.multi2">purple</span>
5+
</h2>
6+
</template>
7+
8+
<style lang="scss" module>
9+
.multi1 {
10+
color: orange;
11+
}
12+
</style>
13+
14+
<style lang="scss" module>
15+
.multi2 {
16+
color: purple;
17+
}
18+
</style>

‎src/components/module-named-multiple.vue

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<h2>
3+
multiple named module=>
4+
<span :class="moduledefault.modulenamedbrands">green</span> |
5+
<span :class="modulecocacola.modulenamedbrands">red</span> |
6+
<span :class="modulepepsi.modulenamedbrands">black</span>
7+
</h2>
8+
</template>
9+
10+
<style lang="scss" module="moduledefault">
11+
.modulenamedbrands {
12+
color: green;
13+
}
14+
</style>
15+
16+
<style lang="scss" module="modulecocacola">
17+
.modulenamedbrands {
18+
color: red;
19+
}
20+
</style>
21+
22+
<style lang="scss" module="modulepepsi">
23+
.modulenamedbrands {
24+
color: black;
25+
}
26+
</style>

‎src/components/module-named.vue

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<h2 :class="classes.mnamed">module named: green-(red | black)</h2>
3+
</template>
4+
5+
<script>
6+
export default {
7+
}
8+
</script>
9+
10+
<style lang="scss" module="classes">
11+
.mnamed {
12+
color: green;
13+
}
14+
</style>
15+
16+
<style lang="scss" module="classes" brand="cocacola">
17+
/* */
18+
.mnamed {
19+
color: red;
20+
}
21+
</style>
22+
23+
<style lang="scss" module="classes" brand="pepsi">
24+
/* */
25+
.mnamed {
26+
color: black;
27+
}
28+
</style>

‎src/components/module-nameless.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<h2 :class="$style.mnameless">module nameless: green-(red | black)</h2>
3+
</template>
4+
5+
<style lang="scss">
6+
.mnameless {
7+
color: green;
8+
}
9+
</style>
10+
11+
<style lang="scss" module brand="cocacola">
12+
.mnameless {
13+
color: red;
14+
}
15+
</style>
16+
17+
<style lang="scss" module brand="pepsi">
18+
.mnameless {
19+
color: black;
20+
}
21+
</style>

‎src/components/module.vue

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<h2 :class="$style.nobrand">module nobrand: green</h2>
3+
</template>
4+
5+
<style lang="scss" module>
6+
.nobrand {
7+
color: green;
8+
}
9+
</style>

‎src/components/scoped-brand.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<h2 class="scopedbrand">scoped brand: green-(red | black)</h2>
3+
</template>
4+
5+
<style lang="scss" scoped>
6+
.scopedbrand {
7+
color: green;
8+
}
9+
</style>
10+
11+
<style lang="scss" scoped brand="cocacola">
12+
.scopedbrand {
13+
color: red;
14+
}
15+
</style>
16+
17+
<style lang="scss" scoped brand="pepsi">
18+
.scopedbrand {
19+
color: black;
20+
}
21+
</style>

‎src/components/scoped-module-named.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<h2 :class="classes.scopedmodulenamed">scoped module named: green-(red | black)</h2>
3+
</template>
4+
5+
<style lang="scss" scoped module="classes">
6+
.scopedmodulenamed {
7+
color: green;
8+
}
9+
</style>
10+
11+
<style lang="scss" scoped module="classes" brand="cocacola">
12+
.scopedmodulenamed {
13+
color: red;
14+
}
15+
</style>
16+
17+
<style lang="scss" scoped module="classes" brand="pepsi">
18+
.scopedmodulenamed {
19+
color: black;
20+
}
21+
</style>

‎src/components/scoped-module-nameless.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<h2 :class="$style.scopedmodulenameless">scoped module nameless: green-(red | black)</h2>
3+
</template>
4+
5+
<style lang="scss" scoped module>
6+
.scopedmodulenameless {
7+
color: green;
8+
}
9+
</style>
10+
11+
<style lang="scss" scoped module brand="cocacola">
12+
.scopedmodulenameless {
13+
color: red;
14+
}
15+
</style>
16+
17+
<style lang="scss" scoped module brand="pepsi">
18+
.scopedmodulenameless {
19+
color: black;
20+
}
21+
</style>

‎src/components/scoped.vue

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<h2 class="scoped">scoped nobrand: green</h2>
3+
</template>
4+
5+
<style lang="scss" scoped>
6+
.scoped {
7+
color: green;
8+
}
9+
</style>

0 commit comments

Comments
 (0)