Using scss mixins with nextJs

Question

我有以下next.config.js设置:

const path = require('path')
const withSass = require('@zeit/next-sass');
module.exports = withSass({
cssModules: true
})
module.exports = {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')]
},
}

和我导入一个全局scss文件使用:

import '../styles/main.scss';

在这主要。scss文件，我使用一些mixins，如:

@mixin wrapper() {
...
@media screen and ($max-hd) {
width: calc(100% - 6em);
}
@media screen and ($max-md) {
width: calc(100% - 2em);
}
}

其中max-hd和max-md都是来自另一个SCSS文件的变量:

$max-md: 'max-width: (#{$break-md - 1px})';
$max-hd: 'max-width: (#{$break-hd - 1px})';

如果我在相同的包装器mixin中使用变量${max-hd} in作为内容，它会打印正确的值:

content: "max-width: (1739px)";

但是媒体的询问似乎完全被忽略了。我有一个艰难的时间调试，因为这是我第一次使用Next.js，我找不到导出的样式(谷歌开发工具把我扔回实际的scss，这看起来是正确的)。

有人知道我做错了什么吗?

Answer 1

这是我如何使用scss与我的下一个js项目:

1. 安装sass

npm install --save-dev sass

(如果在服务器上编译代码，则为npm i sass)。

2. 我创建了一个名为scss的根目录，在其中我有我的变量，mixins等。例如:

breakpoints.scss

$screen-sm-min: 640px;
$screen-md-min: 768px;
$screen-lg-min: 1024px;
$screen-xl-min: 1280px;
@mixin sm {
@media (min-width: #{$screen-sm-min}) {
@content;
}
}
@mixin md {
@media (min-width: #{$screen-md-min}) {
@content;
}
}
@mixin lg {
@media (min-width: #{$screen-lg-min}) {
@content;
}
}
@mixin xl {
@media (min-width: #{$screen-xl-min}) {
@content;
}
}

3. 然后我使用这样的scss模块:

MyComponent.module.scss:

@import '/scss/breakpoints';
.image {
position: relative;

@include lg {
position: fixed;
}
}

5. 在我的组件中，我导入样式并使用它们如下所示:https://beta.nextjs.org/docs/styling/css-modules

这里有更多的选项:https://beta.nextjs.org/docs/styling/sass