How to use mixins with nextjs 13
I am using Nextjs 13.
My global.scss
imports my _mixins.scss
from the same styles
folder.
@import "mixins";
:root {
--font-size-300: 0.75rem; // 12px
--font-size-400: 1rem; // 16px, base
--font-size-500: 1.25rem; // 20px
--font-size-600: 1.5rem; // 24px
--font-size-700: 1.75rem; // 28px
--font-size-800: 2rem; // 32px
--font-size-900: 2.25rem; // 36px
}
html,
body {
padding: 0;
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
My _mixins.scss
file
// 36 * 16 = 576
@mixin sm {
@media (min-width: 36rem) {
@conte开发者_StackOverflow社区nt;
}
}
// 48 * 16 = 768
@mixin md {
@media (min-width: 48rem) {
@content;
}
}
// 62 * 16 = 992
@mixin lg {
@media (min-width: 62rem) {
@content;
}
}
// 75 * 16 = 1200
@mixin xl {
@media (min-width: 75rem) {
@content;
}
}
// 87.5 * 16 = 1400
@mixin xxl {
@media (min-width: 87.5rem) {
@content;
}
}
I try to use my mixin in my layout.module.scss
file in my app folder
.wrapper {
border: 1px solid blue;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
padding: 0 2rem;
@include xl {
max-width: 75rem;
}
}
But I get an error
If I add @import "@styles/mixins";
on top of my layout.module.scss
file, the error goes away. But why should I have to import the mixins from my layout.module.scss
file when I have already imported it into my global.scss
file?
精彩评论