时间戳

首页 > 解决方案 > Scss mixin 不应用样式

webpack - Scss mixin 不应用样式

问题描述

问题

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

我所有的功能都是导入的（据我所知）。

我用什么

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

编码

首先，我的mixin

文案：

$design-size: 375;

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

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

文案

 --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 值。提前致谢！

标签： webpacksassnext.js

解决方案

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

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

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

推荐阅读