Ryan/next-app-template
Template
1
0
Fork 0
mirror of https://github.com/mantinedev/next-app-template.git synced 2025-11-10 04:22:01 +10:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add sass example

Browse Source
This commit is contained in:
Vitaly Rtishchev
2023-10-12 16:36:16 +04:00
parent a91fc46d4b
commit 2a3b76badf
7 changed files with 58 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/Welcome/Welcome.module.css
View File

@ -1,10 +0,0 @@
.title {
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
font-size: rem(100px);
font-weight: 900;
letter-spacing: rem(-2px);
@media (max-width: $mantine-breakpoint-md) {
font-size: rem(50px);
}
}

18
components/Welcome/Welcome.module.scss Normal file
View File

@ -0,0 +1,18 @@
.title {
color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
font-size: 100px;
font-weight: 900;
letter-spacing: -2px;
@include dark {
background-color: red;
}
@include light {
background-color: blue;
}
@media (max-width: $mantine-breakpoint-md) {
font-size: 50px;
}
}

2
components/Welcome/Welcome.tsx
View File

@ -1,5 +1,5 @@
import { Title, Text, Anchor } from '@mantine/core';
import classes from './Welcome.module.css';
import classes from './Welcome.module.scss';
export function Welcome() {
return (

17
mixins/_mixins.scss Normal file
View File

@ -0,0 +1,17 @@
$mantine-breakpoint-xs: '36em';
$mantine-breakpoint-sm: '48em';
$mantine-breakpoint-md: '62em';
$mantine-breakpoint-lg: '75em';
$mantine-breakpoint-xl: '88em';
@mixin light {
[data-mantine-color-scheme='light'] & {
@content;
}
}
@mixin dark {
[data-mantine-color-scheme='dark'] & {
@content;
}
}

5
next.config.js
View File

@ -10,4 +10,9 @@ module.exports = withBundleAnalyzer({
experimental: {
optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
},
sassOptions: {
includePaths: ['./mixins'],
prependData: `@import "mixins";`,
},
});

1
package.json
View File

@ -60,6 +60,7 @@
"postcss-preset-mantine": "1.8.0",
"postcss-simple-vars": "^7.0.1",
"prettier": "^2.8.8",
"sass": "^1.69.3",
"storybook": "^7.4.3",
"storybook-dark-mode": "^3.0.0",
"ts-jest": "^29.1.0",

18
yarn.lock
View File

@ -4484,7 +4484,7 @@ char-regex@^1.0.2:
resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
chokidar@^3.5.3:
"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
version "3.5.3"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@ -6644,6 +6644,11 @@ image-size@^1.0.0:
dependencies:
queue "6.0.2"
immutable@^4.0.0:
version "4.3.4"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f"
integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==
import-fresh@^3.2.1, import-fresh@^3.3.0:
version "3.3.0"
resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@ -9462,6 +9467,15 @@ sass-loader@^13.2.2:
dependencies:
neo-async "^2.6.2"
sass@^1.69.3:
version "1.69.3"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.69.3.tgz#f8a0c488697e6419519834a13335e7b65a609c11"
integrity sha512-X99+a2iGdXkdWn1akFPs0ZmelUzyAQfvqYc2P/MPTrJRuIRoTffGzT9W9nFqG00S+c8hXzVmgxhUuHFdrwxkhQ==
dependencies:
chokidar ">=3.0.0 <4.0.0"
immutable "^4.0.0"
source-map-js ">=0.6.2 <2.0.0"
saxes@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/saxes/-/saxes-6.0.0.tgz#fe5b4a4768df4f14a201b1ba6a65c1f3d9988cc5"
@ -9650,7 +9664,7 @@ slash@^3.0.0:
resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
source-map-js@^1.0.2:
"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==