选择器“：root”不是纯的（纯粹的选择器必须至少包含一个本地类或ID） - 带有SASS模块的NextJS

Question

最近，我一直在切换到我的下一个项目中使用模块，但是我在新创建的.module.scss files中一直收到此错误班级或ID）”。我知道这是因为我没有像我在网上其他地方看到的那样使用纯CSS选择器，而唯一的问题是我正在使用的导入，但是我需要这些导入的变量，例如 $ cl-cl-light--灰色如下所示：

@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选择器，而Sass由于其非纯元素而被使用？

Answer 1

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

编辑：如果您使用next.js 12，请检查上面的文章底部，因为该解决方案有点小不同的。

您将需要更改您的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进行调味或确切工作方式，但是此解决方案对我有用。如果需要，您也可以将正则态度更改为CSS（SCSS | SASS | CSS）。

Answer 2

正如指出的在这里，还有另一个选择：您可以在global.css文件中导入这些样式。如果您这样做，NextJ会很高兴。

Answer 3

任何全局样式（例如，：root 或您想要在应用程序中绝对拥有相同样式的任何HTML元素/CSS类）都应将您导入到 _app.js （如果尚不存在，则可以将其添加到项目的根文件夹中）。
该全局CSS文件也是您要导入将使用应用程序范围的任何字体的地方。

逐步说明在这里： https://nextjs.org/文档/基本功能/内置CSS-Support

Answer 4

在我的特殊情况下，我在这个问题上遇到了同样的头痛，这是因为我试图用路径导入文件：

/node_modules/bootstrap/scss/bootstrap-utilities.scss

该文件正在导入另一个称为_root.scss的文件，该文件以这种样式定义为选择器。

:root{

 }

对于解决方案，我简单地导入用于我的要求的特定文件，

另一种资源可以帮助您：

• https://www.youtube.com/watch?v=donynexv9bm&
• t = 1044s https://sass-lang.com/documentation/modules