在我的 react scss 模块中使用＆符号时出现 SassError

Question

我的 scss 文件出现了这个错误。

我所做的是禁用 TypeScript、eslint 和 prettier，因为我认为这是来自它们但不是。我应该如何解决这个问题？我的语法也是正确的。这是一个有效的 scss。

出现此错误将无法编译我的 React 应用程序。

SassError: Invalid CSS after "...px solid green;": expected "}", was "&.__form: {"
        on line 4 of /Users/raphaelgako/Documents/aRtoo/dev_p/ggpo/client/src/components/SignupLogin/Signup/Signup.module.scss
>>   border: 10px solid green;

   ---------------------------^

package.json:

"dependencies": {
    "node-sass": "4.13.1",
    "react": "16.13.1",
    "redux-thunk": "2.3.0",
    "typescript": "3.8.3"
  },

Answer 1

好吧，您的样式中有一个拼写错误，您在其中定义了带有冒号的内部 class (&.__form:)。所以你需要像这样改变它：

.SignupContainer {
  border: 10px solid green;
  
  &.__form {
    border: 10px solid blue;
  }
}

在我的 react scss 模块中使用＆符号时出现 SassError

I get SassError when using ampersand in my react scss module

css

sass

create-react-app