SassError：顶级选择器可能不包含父选择器“&”$:: webkit-input-placeholder

Question

我正在尝试运行一个使用 Sass 的旧 create-react-app。当我运行 npm start 时，我首先收到以下错误“找不到模块 sass”，其消息类型与此 找不到模块“sass” 然后我尝试删除节点模块，安装 npm react-scripts，然后安装 npm安装，但现在当我运行命令“npm start”时，我们收到以下错误“

”

ERROR in ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/App.scss)
Module build failed (from ./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js):
SassError: Top-level selectors may not contain the parent selector "&".
   ╷
10 │     &::-webkit-input-placeholder {
   │     ^
   ╵
  src\scss\_mixins.scss 10:2            placeholder-color()
  src\scss\basic\_typography.scss 59:1  @import
  src\scss\_style.scss 7:9              @import
  src\App.scss 1:9                      root stylesheet

我的package.json如下

{
  "name": "tf-react",
  "version": "4.6.0",
  "license": "MIT",
  "dependencies": {
    "axios": "^0.27.2",
    "axios-mock-adapter": "^1.21.1",
    "bootstrap": "^5.1.3",
    "disqus-react": "^1.1.3",
    "fslightbox-react": "^1.6.2",
    "markdown-to-jsx": "^7.1.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-feather": "^2.0.10",
    "react-helmet": "^6.1.0",
    "react-lineicons": "^3.0.0",
    "react-masonry-component": "^6.3.0",
    "react-on-screen": "^2.1.1",
    "react-progressive-image": "^0.6.0",
    "react-router-dom": "6.3.0",
    "react-scripts": "^5.0.1",
    "react-slick": "^0.29.0",
    "react-tsparticles": "^1.40.2",
    "sass": "^1.59.3",
    "sass-loader": "^13.2.1",
    "shave": "^4.0.0",
    "slick-carousel": "^1.8.1",
    "webpack": "^5.76.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 5 chrome version",
      "last 5 firefox version",
      "last 5 safari version"
    ]
  }
}

App.js 包含 App.scss，App.scss 包含以下内容

@import './scss/style';

scss/_style 文件如下

/** @format */

@import "variables";
@import "mixins";

@import "basic/reset";
@import "basic/typography";
@import "basic/utilities";

@import "components/button";
@import "components/pagination";
@import "components/header";
@import "components/socialicons";
@import "components/title";
@import "components/progress";
@import "components/service";
@import "components/portfolio";
@import "components/resume";
@import "components/testimonial";
@import "components/form";
@import "components/blog";
@import "components/blogdetails";
@import "components/notfound";

@import "pages/home";
@import "pages/about";
@import "pages/contact";

// Color variations
@import "basic/light";

下面是mixins.scss文件

@mixin clearfix() {
    &::after {
        content: "";
        clear: both;
        display: table;
    }
}

@mixin placeholder-color($placeholder-color) {
    &::-webkit-input-placeholder {
        color: $placeholder-color
    }

    &:-moz-placeholder {
        color: $placeholder-color
    }

    &::-moz-placeholder {
        color: $placeholder-color
    }

    &:-ms-input-placeholder {
        color: $placeholder-color
    }
}



// Gradient color
@mixin gradient-color($value, $deg) {
    @if $value==a {
        background:linear-gradient($deg#{deg}, #f71595 0%, #ed560e 62%, #ff9600 100%);
        background-clip: text;
        text-fill-color: transparent;
    }

    @else if $value==b {
        background:linear-gradient($deg#{deg}, rgb(251, 110, 57) 12%, rgb(252, 85, 93) 50%, rgb(253, 59, 128) 91%);
        background-clip: text;
        text-fill-color: transparent;
    }

    @else if $value==c {
        background:linear-gradient($deg#{deg}, rgb(40, 172, 225) 12%, rgb(81, 204, 231) 50%, rgb(122, 235, 236) 91%);
        background-clip: text;
        text-fill-color: transparent;
    }
}



// Gradient Background
@mixin gradient-bg($value, $deg) {
    @if $value==a {
        background:linear-gradient($deg#{deg}, #ffffff 0%, transparent 95%);
    }

    @else if $value==b {
        background:linear-gradient($deg#{deg}, rgba(223, 32, 32, 1) 0%, rgba(0, 0, 0, 0.6) 36%, rgba(0, 0, 0, 0.3) 100%);
    }

    @else if $value==c {
        background:linear-gradient($deg#{deg}, rgb(40, 172, 225) 12%, rgb(81, 204, 231) 50%, rgb(122, 235, 236) 91%);
    }
}

下面是文件结构

我使用的Node版本是 v18.14.0

这是 src\scss asic_typography.scss 59:1 的部分代码

img {
  max-width: 100%;
}

@include placeholder-color($color-body);

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $ff-heading;
  color: $color-heading;
}

感谢您的帮助！

Answer 1

所以我最近在自己的项目/mixin 中遇到了这个错误，我想我可以向你解释一下。

所以 mixin 是用

&

字符创建的，这意味着它期望像这样被调用：

.top-level-selector {
  @include placeholder-color(red);
}

&

实际上是一个占位符，预计将由“顶级选择器”填充，因此 mixin 将呈现如下：

.top-level-selector::-webkit-input-placeholder {
    color: $placeholder-color
}

如果你按如下方式调用mixin：

@include placeholder-color(red);

那么将不会有“顶级选择器”选择器来填充

&

，因此会出现错误。

我发现解决这个问题的方法是利用

@if

子句编写一些 SASS 代码。

对于你的情况，我会这样做：

@mixin placeholder-color($placeholder-color) {
  $s: #{if(&, '&', '*')};

  #{$s}::-webkit-input-placeholder {
    color: $placeholder-color
  }
}

注：

• 类似 Excel

  if

  风格

• #{$s}

  插值允许将

  $s

  添加到选择器

我已经在本地和 Sass Playground 上进行了测试，效果很好：

链接：

• 父级选择器 - Sass
• @if 和@else - Sass