Skip to content

Commit 7d04e7a

Browse files
nosovknosovk
committed
split css to different files
1 parent dd83860 commit 7d04e7a

File tree

11 files changed

+76
-19
lines changed

11 files changed

+76
-19
lines changed

‎assets/app.js

-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
1-
import "./app.scss";
2-
31
// we need to import all assets to provide manifest for symfony asset tag
42
import.meta.glob([
53
'./images/**'
64
]);
75

8-
import "./components/test-component.svelte"
9-
import "./components/asset-component.svelte"
10-
import "./components/modal-component.svelte"
11-
12-
136
console.log("Init js from vite");

‎assets/components/asset-component.svelte

+1-4
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
<script>
44
import svg from "../images/vector/github.svg"
55
import children1 from "../images/children/1.jpg"
6-
export let customprop1 = null;
7-
export let customprop2 = null;
86
</script>
97

108
<div>
@@ -13,6 +11,5 @@
1311
</div>
1412

1513
<style lang="scss">
16-
p {color: chocolate}
17-
h1 {color: cornflowerblue}
14+
1815
</style>

‎assets/entrypoints/webcomponents.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import "../components/test-component.svelte"
2+
import "../components/asset-component.svelte"
3+
import "../components/modal-component.svelte"
4+
5+
// we can make separate entry point for each web component, or combine them in an entry point
6+
console.log("web components imported");

‎assets/scss/desktop.scss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@media (min-width: 700px) {
2+
p {
3+
color: chocolate;
4+
}
5+
.hide {
6+
display: none;
7+
}
8+
}
9+

‎assets/app.scss renamed to ‎assets/scss/mobile.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
body {
2-
background-color: #eeeeee;
2+
background-color: #242121;
33
p {
44
color: cyan;
55
}

‎assets/scss/print.scss

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@media print {
2+
h1 {
3+
color: black;
4+
background-color: white;
5+
}
6+
}

‎config/routes.yaml

+5
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,8 @@ index:
44
defaults:
55
template: 'index.html.twig'
66
statusCode: 200
7+
webcomponents:
8+
path: /webcomponents
9+
controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController::templateAction
10+
defaults:
11+
template: /webcomponents/index.html.twig

‎templates/base.html.twig

+15
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,25 @@
66
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
77
{% block stylesheets %}
88
{{ vite_entry_link_tags('app') }}
9+
{{ vite_entry_link_tags('mobileStyles') }}
10+
{{ vite_entry_link_tags('desktopStyles', {
11+
attr: {
12+
media: "screen and (min-width: 700px)"
13+
}
14+
})}}
15+
{{ vite_entry_link_tags('printStyles', {
16+
attr: {
17+
media: "print"
18+
}
19+
})}}
20+
921
{% endblock %}
1022

1123
{% block javascripts %}
1224
{{ vite_entry_script_tags('app') }}
25+
{{ vite_entry_script_tags('mobileStyles') }}
26+
{{ vite_entry_script_tags('desktopStyles') }}
27+
{{ vite_entry_script_tags('printStyles') }}
1328
{% endblock %}
1429
</head>
1530
<body>

‎templates/index.html.twig

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
{% extends "base.html.twig" %}
2+
23
{% block body %}
34
<p>base</p>
4-
<test-component customprop1="1" customprop2="true"></test-component>
5-
<p>we can use static asset import in web component</p>
6-
<asset-component></asset-component>
7-
<p>We also can use images from vite with standart asset tag</p>
5+
<a href="/webcomponents">webcomponents</a>
6+
<p>We also can use images from vite with standard asset tag</p>
87
<img src="{{ asset('assets/images/vector/github.svg') }}" />
9-
<p>slots</p>
10-
<modal-component>some modal text passed inside svelte component</modal-component>
8+
<p class="hide">this text visible only in px<700</p>
119
{% endblock %}

‎templates/webcomponents/index.html.twig

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{% extends "base.html.twig" %}
2+
3+
{% block stylesheets %}
4+
{{ parent() }}
5+
{{ vite_entry_link_tags('webcomponents') }}
6+
{% endblock %}
7+
8+
{% block javascripts %}
9+
{{ parent() }}
10+
{{ vite_entry_script_tags('webcomponents') }}
11+
{% endblock %}
12+
13+
{% block body %}
14+
<p>base</p>
15+
<a href="/">no web components</a>
16+
<test-component customprop1="1" customprop2="true"></test-component>
17+
<p>slots</p>
18+
<modal-component>some modal text passed inside svelte component</modal-component>
19+
<p>we can use static asset import in web component</p>
20+
<asset-component></asset-component>
21+
<p>We also can use images from vite with standart asset tag</p>
22+
<img src="{{ asset('assets/images/vector/github.svg') }}" />
23+
24+
{% endblock %}

‎vite.config.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,11 @@ export default defineConfig({
2424
build: {
2525
rollupOptions: {
2626
input: {
27-
app: "./assets/app.js"
27+
app: "./assets/app.js",
28+
mobileStyles: "./assets/scss/mobile.scss",
29+
desktopStyles: "./assets/scss/desktop.scss",
30+
printStyles: "./assets/scss/print.scss",
31+
webcomponents: "./assets/entrypoints/webcomponents.js",
2832
},
2933
}
3034
},

0 commit comments

Comments
 (0)