选择器“:root”不是纯选择器（纯选择器必须至少包含一个本地 class 或 id）- NextJS with SASS modules

Question

我最近一直在我的 next.js 项目中切换到使用模块，但我在新创建的 .module.scss 文件中一直收到此错误：“选择器”:root“不是纯粹的（纯选择器必须至少包含一个本地 class 或 id）”。我知道这是因为我没有像我在网上其他地方看到的那样使用纯 css 选择器，唯一的问题是我正在使用的导入，但我需要那些导入变量，例如 $cl-light-gray 如下面的示例文件所示：

@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导入以及这些样式也不是全局的。最后，为什么 Next.js 期望我在使用 Sass 时使用纯 css 选择器，因为它的非纯元素被使用？

Answer 1

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

您需要更改 next.config.js 文件以包含以下内容：

/** @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。

选择器“:root”不是纯选择器（纯选择器必须至少包含一个本地 class 或 id）- NextJS with SASS modules

Selector ":root" is not pure (pure selectors must contain at least one local class or id) - NextJS with SASS modules

css

sass

css-modules

react-css-modules

next.js