LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-06 04:22:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve scss imports and legacy compiler

Browse Source
This commit is contained in:
Torsten Dittmann
2024-11-11 12:56:04 +01:00
parent 76b88bc819
commit 6965264682
33 changed files with 227 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/lib/animations/Products/Products.svelte
View File

@@ -158,7 +158,6 @@
import { postController } from './post';
import Post from './post/post.svelte';
import { anyify } from '$lib/utils/anyify';
import Badge from '$lib/components/ui/Badge.svelte';
/* Basic Animation setup */
let scrollInfo = {
@@ -508,10 +507,6 @@
display: flex;
align-items: center;
gap: 0.75rem;
.web-label {
margin-block-start: 0.25rem;
}
}
h4 {

4
src/lib/animations/Products/ProductsMobile.svelte
View File

@@ -108,10 +108,6 @@
display: flex;
align-items: center;
gap: 0.75rem;
.web-label {
margin-block-start: 0.25rem;
}
}
h4 {

2
src/lib/animations/Products/functions/phone.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { flip } from '$lib/utils/flip';
import { crossfade, scale, slide } from 'svelte/transition';
import { scale, slide } from 'svelte/transition';
import { functionsController } from '.';
const { state } = functionsController;

2
src/lib/animations/Products/post/index.ts
View File

@@ -1,4 +1,4 @@
import { safeAnimate, sleep } from '$lib/animations';
import { safeAnimate } from '$lib/animations';
import { createResettable } from '$lib/utils/resettable';
import { animate } from 'motion';
import { getElSelector } from '../Products.svelte';

1
src/lib/components/IsLoggedIn.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import Button from './ui/Button.svelte';
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { classNames } from '$lib/utils/classnames';
import { trackEvent } from '$lib/actions/analytics';

2
src/lib/components/LogoList.svelte
View File

@@ -87,7 +87,7 @@
<ul
class="web-u-padding-block-start-80 grid grid-cols-3 text-center md:grid-cols-6 md:gap-10"
>
{#each logos as { src, alt, width, height }, i}
{#each logos as { src, alt, width, height }}
<li class="grid place-content-center">
<img {src} {alt} {width} {height} />
</li>

16
src/lib/components/carousel/CarouselSlide.svelte
View File

@@ -5,21 +5,19 @@
</li>
<style lang="scss">
@use '$scss/abstract' as *;
@use '$scss/abstract/functions' as f;
.slide {
cursor: grab;
&:active {
cursor: grabbing;
}
flex: 0 0 50%;
min-width: 0;
margin-right: f.pxToRem(16);
@media (max-width: 768px) {
flex: 0 0 100%;
}
flex: 0 0 50%;
min-width: 0;
margin-right: pxToRem(16);
&:active {
cursor: grabbing;
}
}
</style>

1
src/lib/layouts/Main.svelte
View File

@@ -25,7 +25,6 @@
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import AnnouncementBanner from '$lib/components/AnnouncementBanner.svelte';
import InitBanner from '$lib/components/InitBanner.svelte';
import Button from '$lib/components/ui/Button.svelte';
import { trackEvent } from '$lib/actions/analytics';
export let omitMainId = false;

25
src/markdoc/layouts/Integration.svelte
View File

@@ -2,7 +2,6 @@
import { Root, Slide } from '$lib/components/carousel';
import FooterNav from '$lib/components/FooterNav.svelte';
import MainFooter from '$lib/components/MainFooter.svelte';
import ProductsGrid from '$lib/components/ProductsGrid.svelte';
import { Main } from '$lib/layouts';
import { DEFAULT_HOST } from '$lib/utils/metadata';
import type { Integration } from '$routes/integrations/+page';
@@ -181,13 +180,8 @@
</Main>
<style lang="scss">
@use '$scss/abstract' as *;
.cta {
min-height: pxToRem(560);
display: flex;
align-items: center;
}
@use '$scss/abstract/functions' as f;
@use '$scss/abstract/variables/devices';
.web-pre-footer-bg {
position: absolute;
@@ -199,24 +193,15 @@
max-inline-size: unset;
max-block-size: unset;
}
/* more tha 9 items */
.l-side-column {
display: flex;
gap: pxToRem(16);
@media #{$break1} {
flex-direction: column;
}
}
.l-grid-2-1 {
@media #{$break1} {
@media #{devices.$break1} {
display: flex;
flex-direction: column;
}
@media #{$break2open} {
@media #{devices.$break2open} {
display: grid;
gap: pxToRem(64);
gap: f.pxToRem(64);
grid-template-columns: repeat(12, 1fr);
}

4
src/routes/+page.svelte
View File

@@ -129,9 +129,7 @@
<span class="web-icon-star shrink-0" aria-hidden="true" />
<span class="text-caption shrink-0 font-medium">New</span>
<div class="web-hero-banner-button-sep" />
<span class="text-caption web-u-trim-1"
>Introducing Database Backups</span
>
<span class="text-caption web-u-trim-1">Introducing Database Backups</span>
<span class="web-icon-arrow-right shrink-0" aria-hidden="true" />
</a>

8
src/routes/contact-us/enterprise/+page.svelte
View File

@@ -77,15 +77,11 @@
<Main>
<div class="web-big-padding-section">
<div id="form" class="web-big-padding-section-level-1 u-padding-0 u-overflow-hidden">
<div
class="web-big-padding-section-level-2 is-margin-replace-padding relative"
>
<div class="web-big-padding-section-level-2 is-margin-replace-padding relative">
<div class="relative">
<div class="web-container relative">
<!-- before submit -->
<div
class="relative u-z-index-1 web-grid-1-1-opt-2 u-gap-32 e-u-row-gap-0"
>
<div class="u-z-index-1 web-grid-1-1-opt-2 u-gap-32 e-u-row-gap-0 relative">
<div>
<div
class="web-u-max-inline-size-none-mobile"

4
src/routes/docs/+page.svelte
View File

@@ -385,10 +385,6 @@
}
}
.bg-blur {
inset-block-start: -100px;
}
.tech-hero {
@include gradients.border-block-gradient;

3
src/routes/heroes/+page.svelte
View File

@@ -355,6 +355,7 @@
</Main>
<style lang="scss">
@use '$scss/abstract/functions' as f;
@use '$scss/abstract/mixins/border-gradient' as gradients;
.hero {
@@ -456,7 +457,7 @@
padding-inline: 4rem;
display: flex;
gap: pxToRem(32);
gap: f.pxToRem(32);
flex-shrink: 0;
> * {

8
src/routes/init-0/(components)/CountdownCard.svelte
View File

@@ -34,12 +34,4 @@
justify-content: center;
align-items: center;
}
.text-title font-aeonik-pro {
margin-block-start: 0.75rem;
}
.text-sub-body font-medium {
margin-block-start: 0.5rem;
}
</style>

6
src/routes/init-0/(components)/Ticket.svelte
View File

@@ -413,12 +413,6 @@
z-index: -1;
}
.text-title font-aeonik-pro {
font-size: adjusted(2.5);
line-height: #{math.div(44, 40)}em;
overflow-wrap: break-word;
}
.text-label {
font-size: adjusted(1.5);
line-height: #{math.div(28, 24)}em;

8
src/routes/init/(components)/CountdownCard.svelte
View File

@@ -33,12 +33,4 @@
align-items: center;
background-color: hsl(var(--web-color-subtle));
}
.text-title font-aeonik-pro {
margin-block-start: 0.75rem;
}
.text-sub-body font-medium {
margin-block-start: 0.5rem;
}
</style>

4
src/routes/init/(components)/TicketScroll.svelte
View File

@@ -58,12 +58,12 @@
</div>
<style lang="scss">
@use '$scss/abstract' as *;
@use '$scss/abstract/functions' as f;
.col {
display: flex;
flex-direction: column;
gap: pxToRem(32);
gap: f.pxToRem(32);
@keyframes scroll {
0% {

4
src/routes/init/(components)/VideoDialog.svelte
View File

@@ -56,7 +56,7 @@
pointer-events: none;
transition: 200ms ease;
&[data-state='open'] {
:global(&[data-state='open']) {
opacity: 1;
pointer-events: all;
}
@@ -82,7 +82,7 @@
pointer-events: none;
transition: 200ms ease;
&[data-state='open'] {
:global(&[data-state='open']) {
opacity: 1;
transform: scale(1);
pointer-events: all;

4
src/routes/init/(components)/grid/Cell.svelte
View File

@@ -8,12 +8,12 @@
</div>
<style lang="scss">
@use '$scss/abstract' as *;
@use '$scss/abstract/functions' as f;
.cell {
display: flex;
flex-direction: column;
gap: pxToRem(32);
gap: f.pxToRem(32);
height: 100%;
@media screen and (min-width: 768px) {

4
src/routes/init/(components)/grid/Root.svelte
View File

@@ -8,11 +8,11 @@
</div>
<style lang="scss">
@use '$scss/abstract' as *;
@use '$scss/abstract/functions' as f;
.grid {
display: flex;
gap: pxToRem(32);
gap: f.pxToRem(32);
flex-direction: column;
@media screen and (min-width: 768px) {

32
src/routes/init/(components)/ticket/Ticket.svelte
View File

@@ -178,7 +178,7 @@
</div>
<style lang="scss">
@use '$scss/abstract' as *;
@use '$scss/abstract/functions' as f;
$base-width: 22;
.wrapper {
@@ -231,7 +231,7 @@
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 4px;
overflow: hidden;
border-radius: pxToRem(16);
border-radius: f.pxToRem(16);
aspect-ratio: 2 / 1;
animation: fade 1s ease-out;
transition: transform 100ms;
@@ -245,7 +245,7 @@
display: flex;
flex-direction: column;
justify-content: center;
border-radius: pxToRem(8);
border-radius: f.pxToRem(8);
line-height: 1;
position: relative;
overflow: hidden;
@@ -270,7 +270,7 @@
justify-content: space-between;
width: fit-content;
gap: 4px;
padding: pxToRem(24) 0;
padding: f.pxToRem(24) 0;
left: 80%;
span {
@@ -288,17 +288,17 @@
--delay: 700ms;
display: flex;
flex-direction: column;
gap: pxToRem(4);
gap: f.pxToRem(4);
width: 60%;
margin: pxToRem(16);
border-radius: pxToRem(16);
margin: f.pxToRem(16);
border-radius: f.pxToRem(16);
&[data-remove-delay] {
--delay: 0ms;
}
.row {
gap: pxToRem(4);
gap: f.pxToRem(4);
display: flex;
div {
@@ -307,14 +307,14 @@
height: var(--size);
flex-shrink: 0;
@media screen and (min-width: 768px) {
--size: 8px;
}
border-radius: calc(var(--size) / 4);
animation: fade-in 500ms ease calc(calc(75ms * var(--index)) + var(--delay))
forwards;
@media screen and (min-width: 768px) {
--size: 8px;
}
&[data-level] {
--bg-color: var(--web-color-accent);
}
@@ -358,9 +358,9 @@
grid-column: span 9 / span 9;
height: 100%;
background: #000;
padding: pxToRem(20);
padding: f.pxToRem(20);
position: relative;
border-radius: pxToRem(16);
border-radius: f.pxToRem(16);
overflow: hidden;
.text-label {
@@ -385,8 +385,4 @@
}
}
}
.text-title font-aeonik-pro {
font-size: clamp(20px, 1vw, 24px);
line-height: 1;
}
</style>

10
src/routes/init/tickets/customize/+page.svelte
View File

@@ -131,14 +131,4 @@
margin-block-start: 0;
}
}
.text-display font-aeonik-pro {
margin-bottom: -48px;
}
@media screen and (min-width: 768px) {
.text-display font-aeonik-pro {
margin-bottom: 0;
}
}
</style>

44
src/routes/integrations/+page.svelte
View File

@@ -447,16 +447,18 @@
</Main>
<style lang="scss">
@use '$scss/abstract' as *;
@use '$scss/abstract/functions' as f;
@use '$scss/abstract/variables/devices';
:global([data-scroll-smooth]) {
scroll-behavior: smooth;
}
.hero {
min-height: pxToRem(620);
min-height: f.pxToRem(620);
@media (min-width: 768px) {
display: grid;
grid-template-columns: 60% minmax(0, 1fr);
gap: pxToRem(32);
gap: f.pxToRem(32);
justify-content: space-between;
align-items: center;
position: relative;
@@ -465,7 +467,7 @@
transform-origin: left center;
scale: 1.25;
position: relative;
left: pxToRem(-30);
left: f.pxToRem(-30);
}
}
@@ -525,7 +527,7 @@
/* more tha 9 items */
.l-max-size-list-cards-section {
scroll-snap-align: start;
scroll-margin-top: pxToRem(120);
scroll-margin-top: f.pxToRem(120);
}
.l-max-size-list-cards {
&:where(:has(> ul > li:nth-child(10))) {
@@ -536,7 +538,7 @@
bottom: 0;
height: 100%;
width: 100%;
max-height: pxToRem(350);
max-height: f.pxToRem(350);
content: '';
display: block;
background: linear-gradient(
@@ -550,7 +552,7 @@
.l-float-button {
position: absolute;
inset-inline: 0;
inset-block-end: pxToRem(20);
inset-block-end: f.pxToRem(20);
margin-inline: auto;
display: flex;
}
@@ -576,16 +578,16 @@
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 1rem;
@media #{$break1} {
@media #{devices.$break1} {
gap: 1.25rem;
}
}
.l-integrations-grid {
position: relative;
@media #{$break1} {
@media #{devices.$break1} {
gap: 0;
padding-block-start: pxToRem(80);
padding-block-start: f.pxToRem(80);
}
.disabled {
@@ -596,8 +598,8 @@
}
.sidebar {
margin-bottom: pxToRem(60);
@media #{$break2open} {
margin-bottom: f.pxToRem(60);
@media #{devices.$break2open} {
position: sticky;
top: 50px;
height: 500px;
@@ -609,7 +611,7 @@
}
.tag {
min-width: pxToRem(42) !important;
min-width: f.pxToRem(42) !important;
&.active-tag {
background-color: #fff;
@@ -618,17 +620,17 @@
}
}
@media #{$break2open} {
@media #{devices.$break2open} {
display: grid;
gap: pxToRem(68);
grid-template-columns: pxToRem(240) 1fr;
padding-block-start: pxToRem(40);
gap: f.pxToRem(68);
grid-template-columns: f.pxToRem(240) 1fr;
padding-block-start: f.pxToRem(40);
}
}
.l-integrations-hero {
@media #{$break1} {
@media #{devices.$break1} {
}
@media #{$break2open} {
@media #{devices.$break2open} {
}
}
.l-bg-1 {
@@ -645,12 +647,12 @@
}
.web-feature-grid {
@media #{$break1} {
@media #{devices.$break1} {
gap: 1rem;
}
}
.web-feature-grid {
@media #{$break1} {
@media #{devices.$break1} {
gap: 1rem;
}
}

6
src/routes/pricing/+page.svelte
View File

@@ -359,10 +359,4 @@
gap: 1rem;
grid-template-columns: repeat(4, 1fr);
}
.web-pricing-cards-list .web-main-body-500 {
height: 78px;
--p-font-size: unset !important;
--p-line-height: var(--web-line-height-sm);
}
</style>

1
src/routes/products/messaging/(components)/Target.svelte
View File

@@ -2,7 +2,6 @@
import { clamp } from '$lib/utils/clamp';
import { withPrevious } from '$lib/utils/withPrevious';
import { withRaf } from '$lib/utils/withRaf';
import { get } from 'svelte/store';
import Accordion from './Accordion/Accordion.svelte';
import AccordionItem from './Accordion/AccordionItem.svelte';
import Checkbox from './Checkbox.svelte';

4
src/routes/startups/+page.svelte
View File

@@ -187,8 +187,8 @@
class="text-description web-u-max-width-640 e-u-padding-inline-32-desktop mx-auto"
>
The Appwrite Startups Program supports your startup with a complete
backend for you to build your products. You will receive
$20,000 Cloud credits for Appwrite Scale for 12 months.
backend for you to build your products. You will receive $20,000 Cloud
credits for Appwrite Scale for 12 months.
</p>
<button on:click={scrollToForm} class="web-button mt-3 mx-auto">
Apply now

2
src/routes/startups/faq.svelte
View File

@@ -25,7 +25,7 @@
},
{
question: 'Who is eligible to apply?',
answer: "We welcome early-stage startups as well as startups established within the last decade. So whether you are still looking to build your backend or want to switch to Appwrite, we welcome you to join."
answer: 'We welcome early-stage startups as well as startups established within the last decade. So whether you are still looking to build your backend or want to switch to Appwrite, we welcome you to join.'
},
{
question: 'What are the limits of the Scale plan?',

3
src/routes/students/(components)/CallToAction.svelte
View File

@@ -21,8 +21,7 @@
Develop your developer skills with Appwrite Pro, join a vibrant community of
open-source contributors, and start building with a vast array of frameworks.
</p>
<a href={educationSignUp} class="web-button mt-4 !w-full md:!w-fit">Sign up</a
>
<a href={educationSignUp} class="web-button mt-4 !w-full md:!w-fit">Sign up</a>
</div>
</div>
</div>

6
src/routes/students/(components)/GetStarted.svelte
View File

@@ -9,7 +9,11 @@
{
label: 'Enroll to the GitHub Student Developer Pack',
description: 'Sign up for the Student Developer pack and explore the benefits.',
cta: { url: 'https://github.com/education', label: 'Enroll on GitHub Education', icon: 'github' }
cta: {
url: 'https://github.com/education',
label: 'Enroll on GitHub Education',
icon: 'github'
}
},
{
label: 'Redeem your Cloud credits',

4
src/routes/threads/[id]/MessageCard.svelte
View File

@@ -53,10 +53,6 @@
overflow: hidden;
}
.text-sub-body font-medium {
font-size: 1rem !important;
}
.header {
display: flex;
justify-content: space-between;

89
src/scss/7-components/_main-header.scss
View File

@@ -4,71 +4,106 @@
--p-main-header-padding-block: #{pxToRem(15)};
--p-main-header-link-color: var(--web-color-greyscale-900);
--p-main-header-border-color: rgb(0,0,0, 0.1);
--p-main-header-border-color: rgb(0, 0, 0, 0.1);
position:sticky; z-index:999; inset-block-start:0; background-color:hsl(var(--p-body-bg-color));
padding-inline:pxToRem(32); border-block-end: solid pxToRem(1) var(--p-main-header-border-color);
min-block-size:pxToRem(73);
position: sticky;
z-index: 999;
inset-block-start: 0;
background-color: hsl(var(--p-body-bg-color));
padding-inline: pxToRem(32);
border-block-end: solid pxToRem(1) var(--p-main-header-border-color);
min-block-size: pxToRem(73);
transition: transform 0.3s ease;
&.is-special-padding {
padding-inline: clamp(1.25rem,4vw,120rem); /* Thomas calculation */
padding-inline: clamp(1.25rem, 4vw, 120rem); /* Thomas calculation */
}
&.is-docs {
.#{$p}-main-header-wrapper { max-inline-size:86.875rem; }
.#{$p}-main-header-wrapper {
max-inline-size: 86.875rem;
}
}
&.is-reference {
.#{$p}-main-header-wrapper { max-inline-size:var(--container-size-huge); }
.#{$p}-main-header-wrapper {
max-inline-size: var(--container-size-huge);
}
}
&-wrapper {
display:flex; flex-wrap:wrap; justify-content:center; gap:pxToRem(16); margin-inline:auto;
max-inline-size:pxToRem(1728); padding-block:var(--p-main-header-padding-block);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: pxToRem(16);
margin-inline: auto;
max-inline-size: pxToRem(1728);
padding-block: var(--p-main-header-padding-block);
}
&-start {
display: flex;
align-items: center;
}
&-end {
display: flex;
margin-inline-start: auto;
align-items: center;
gap: pxToRem(8);
}
&-start { display:flex; align-items:center; }
&-end { display:flex; margin-inline-start:auto; align-items:center; gap:pxToRem(8) }
.#{$p}-input-text { padding-block:pxToRem(7); padding-inline-end:pxToRem(8); }
.web-logo { margin-inline-end:pxToRem(32); }
.#{$p}-input-text {
padding-block: pxToRem(7);
padding-inline-end: pxToRem(8);
}
.web-logo {
margin-inline-end: pxToRem(32);
}
&-nav {
align-self:center; font-size:pxToRem(16); user-select:none;
&-list { display:flex; gap:pxToRem(32); }
align-self: center;
font-size: pxToRem(16);
user-select: none;
&-list {
display: flex;
gap: pxToRem(32);
}
&-link {
color:hsl(var(--web-color-primary)); transition:var(--transition);
&.is-selected { color:hsl(var(--p-main-header-link-color)); }
color: hsl(var(--web-color-primary));
transition: var(--transition);
&.is-selected {
color: hsl(var(--p-main-header-link-color));
}
}
}
&-more {
&-link { color:hsl(var(--color-neutral-0) / 0.64); }
&-link {
color: hsl(var(--color-neutral-0) / 0.64);
}
}
&.is-transparent {
[data-js-enabled] & {
background-color: transparent; -webkit-backdrop-filter:blur(pxToRem(10)); backdrop-filter:blur(pxToRem(10));
background-color: transparent;
-webkit-backdrop-filter: blur(pxToRem(10));
backdrop-filter: blur(pxToRem(10));
}
}
#{$theme-dark} &,
&#{$theme-dark} {
--p-main-header-link-color: var(--web-color-greyscale-100);
--p-main-header-border-color: rgb(255,255,255, 0.1);
--p-main-header-border-color: rgb(255, 255, 255, 0.1);
}
#{$theme-light} &,
&#{$theme-light} {
--p-main-header-link-color: var(--web-color-greyscale-900);
--p-main-header-border-color: rgb(0,0,0, 0.1);
--p-main-header-border-color: rgb(0, 0, 0, 0.1);
}
@media #{$break1}, #{$break2}{
display:none;
@media #{$break1}, #{$break2} {
display: none;
}
transition: transform 0.3s ease;
&.is-hidden {
transform: translateY(-100%);
}

43
src/scss/7-components/_mobile-header.scss
View File

@@ -1,29 +1,48 @@
@use '../abstract' as *;
.#{$p}-mobile-header {
--p-mobile-header-border-color: rgb(0,0,0, 0.1);
--p-mobile-header-border-color: rgb(0, 0, 0, 0.1);
position:sticky; z-index:120; inset-block-start:0; background-color:hsl(var(--p-body-bg-color));
display:flex; justify-content:space-between; align-items:center; gap:pxToRem(16);
position: sticky;
z-index: 120;
inset-block-start: 0;
background-color: hsl(var(--p-body-bg-color));
display: flex;
justify-content: space-between;
align-items: center;
gap: pxToRem(16);
border-block-end: solid 1px var(--p-mobile-header-border-color);
padding-inline:pxToRem(20); padding-block:pxToRem(16);
&-start { display:flex; align-items: center; }
&-end { display:flex; align-items: center; gap: pxToRem(8) }
&.is-transparent { background-color:transparent; -webkit-backdrop-filter:blur(pxToRem(8)); backdrop-filter:blur(pxToRem(8)); }
@media #{$break3open} { display:none; }
padding-inline: pxToRem(20);
padding-block: pxToRem(16);
transition: transform 0.3s ease;
&-start {
display: flex;
align-items: center;
}
&-end {
display: flex;
align-items: center;
gap: pxToRem(8);
}
&.is-transparent {
background-color: transparent;
-webkit-backdrop-filter: blur(pxToRem(8));
backdrop-filter: blur(pxToRem(8));
}
@media #{$break3open} {
display: none;
}
#{$theme-dark} &,
&#{$theme-dark} {
--p-mobile-header-border-color: rgb(255,255,255, 0.1);
--p-mobile-header-border-color: rgb(255, 255, 255, 0.1);
}
#{$theme-light} &,
&#{$theme-light} {
--p-mobile-header-border-color: rgb(0,0,0, 0.1);
--p-mobile-header-border-color: rgb(0, 0, 0, 0.1);
}
transition: transform 0.3s ease;
&.is-hidden {
transform: translateY(-100%);
}

7
vite.config.ts
View File

@@ -27,6 +27,13 @@ export default defineConfig({
includePublic: true
})
],
css: {
preprocessorOptions: {
scss: {
api: 'modern'
}
}
},
build: {
reportCompressedSize: false
},