sass - 选择器 ":root" 不是纯的(纯选择器必须包含至少一个本地类或 id) - NextJS 与 SASS 模块

@import "src/common/styles/global-styles.scss";
@import "node_modules/bootstrap/scss/bootstrap";
@import "src/common/styles/palette.scss";
@import "src/common/styles/typography.scss";

.dashboard-dropdown-hover {
  @extend .px-1;
  @extend .py-2;
  @extend .mt-3;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: 200ms;
  background-color: transparent;
}
.dashboard-dropdown-hover:hover {
  background-color: $cl-light-gray;
}

有没有人可以解决我应该如何解决这个导入问题?我知道如果我切换回 .scss 它将起作用,但我试图避免在 _app.tsx 中导入所有 .scss 文件,因为那将是至少 30 次导入,而且这些样式也不打算是全局的.最后,当我使用 Sass 时,为什么 Next.js 期望我使用纯 css 选择器,因为它的非纯元素而被使用?

回答1

在互联网上搜索了几个小时后,我从这里找到了一个很好的解决方案:https://dhanrajsp.me/snippets/customize-css-loader-options-in-nextjs

/** @type {import('next').NextConfig} */
require("dotenv").config();
const regexEqual = (x, y) => {
  return (
    x instanceof RegExp &&
    y instanceof RegExp &&
    x.source === y.source &&
    x.global === y.global &&
    x.ignoreCase === y.ignoreCase &&
    x.multiline === y.multiline
  );
};
// Overrides for css-loader plugin
function cssLoaderOptions(modules) {
  const { getLocalIdent, ...others } = modules; // Need to delete getLocalIdent else localIdentName doesn't work
  return {
    ...others,
    localIdentName: "[hash:base64:6]",
    exportLocalsConvention: "camelCaseOnly",
    mode: "local",
  };
}
module.exports = {
  webpack: (config) => {
    const oneOf = config.module.rules.find(
      (rule) => typeof rule.oneOf === "object"
    );
    if (oneOf) {
      // Find the module which targets *.scss|*.sass files
      const moduleSassRule = oneOf.oneOf.find((rule) =>
        regexEqual(rule.test, /\.module\.(scss|sass)$/)
      );

      if (moduleSassRule) {
        // Get the config object for css-loader plugin
        const cssLoader = moduleSassRule.use.find(({ loader }) =>
          loader.includes("css-loader")
        );
        if (cssLoader) {
          cssLoader.options = {
            ...cssLoader.options,
            modules: cssLoaderOptions(cssLoader.options.modules),
          };
        }
      }
    }
    return config;
  },
};

我不熟悉 webpack 或者它是如何工作的,但是这个解决方案对我有用。如果需要,您还可以通过 (scss|sass|css) 更改正则表达式以包含 css。

相似文章

centos7 - Nmap 脚本 ssl-dh-params tls.lua 执行时出错

我正在使用Nmap来验证我们的一些服务器设置,以确保我们符合要求。在扫描中弹出但在之前的任何其他扫描中都没有出现的一件事是我们的key交换大小问题。我们允许1028并且要符合要求,它需要限制为2048...

最新文章