【问题标题】：Scss mixin does not apply stylingScss mixin 不应用样式
【发布时间】：2021-03-21 20:09:34
【问题描述】：

问题

所以我一直试图让我的“px to vw”mixin 在 Scss 中工作。但是，我一直遇到一个问题，即 mixin 没有执行，例如，当我检查 h1 时，我将 mixin 重新放入检查器中。

我所有的函数都被导入（从我所见）。

我用什么

我运行 Scss，它是通过 Next.js/Webpack 编译的。

代码

首先，我的混音

Scss：

$design-size: 375;

@mixin get-vw($target) {
  font-size: (($target / $design-size) * 100) * 1vw;
}

定义 mixin 后，我尝试在变量标题上使用它，如下所示：

Scss

 --heading-1-size: get-vw(32);

但是，它是这样返回的：

使用的Webpack函数（不是整个函数，不包括字体渲染）：

module.exports = {
  trailingSlash: true,
  webpack: (config) => {
    config.module.rules.map((rule) => {
      if (rule.oneOf) {
        rule.oneOf.find((configRule) => {
          if (Array.isArray(configRule.use)) {
            configRule.use.forEach((loaderItem) => {
              const isSassRule = loaderItem.loader && loaderItem.loader.includes('sass-loader')
              if (isSassRule) {
                configRule.use.push({
                  loader: 'sass-resources-loader',
                  options: {
                    resources: [
                      './src/styles/config/_media-queries.scss',
                      './src/styles/config/_fonts.scss'
                    ]
                  },
                })
              }
            })
          }
        })
      }
    })

    return config
  },
}

在理想情况下，返回的值将是一个 vw 值。提前致谢！

【问题讨论】：

标签： webpack sass next.js

【解决方案1】：

该示例不起作用，因为您尝试使用 @mixin 将 css 属性分配给 css 变量，您可以将 get-vw 转换为可用于设置值的 @function为--heading-1-size。

@function get-vw($target) {
  @return (($target / $design-size) * 100) * 1vw;
}

:root {
  --heading-1-size: #{get-vw(32)};
}

【讨论】：

不错！这适用于在 :root! 中定义字体大小！现在，我怎样才能通过运行get-vw(20) 在任何其他组件中使用相同的功能来完成这项工作？谢谢！
您可以通过在选择器中调用元素来覆盖元素的 css 变量的值，即h1 { --heading-1-size: #{get-vw(32)}; font-size: var(--heading-1-size); }
我不是这个意思。当我在里面让我们说 Checkbox.scss 文件时，我希望能够添加自定义大小。我也想用它作为padding: get-vw(10) get-vw(20); 等:)
因此您可以添加自定义尺寸，这些尺寸将级联到子元素样式，即.checkbox { --heading-1-size: #{get-vw(32)}; } .checkbox > label { font-size: var(--heading-1-size); }，您可以将其用作padding: get-vw(10)，这样就可以了。
这里的问题是我每次都必须定义函数，现在，没有办法简单地导入它并在全局范围内使用它。