在声明问题之前，将javascriptReact为使用的typescript SCSS变量

2wnc66cl 于 2022-11-26 发布在 TypeScript

关注(0)|答案(1)|浏览(162)

我正在做一个javascript react项目，它正在被移植到typescript上。除了scss之外，一切似乎都很顺利。
我们在scss文件中使用了变量，这些文件在javascript中工作。然而，现在应用程序正在迁移以做出React，我收到了以下错误消息：

ERROR in ./src/ourApp/scss/config/interactive/_variables.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/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/ourApp/scss/config/interactive/_variables.scss)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
20 │ $vertical-menu-border: $white;
   │                        ^^^^^^
   ╵
  src\ourApp\scss\config\interactive\_variables.scss 20:24  root stylesheet

这个问题的根本原因似乎是$白色在被声明之前就被使用了，当我把$white声明移到$vertical-menu-border声明之上时，这个问题就消失了。我会重新排序每个scss变量来解决这个问题，但是我不确定这样做是否正确，因为有几个文件需要像这样修复。
为什么这是React.Typescript中的一个问题，而不是React.Javascript中的？
有什么建议吗？我可以禁用这个scss错误检查器吗？如果可以的话，怎么做？

typescript

来源：https://stackoverflow.com/questions/74447005/react-javascript-to-typescript-scss-variable-used-before-decleration-issue

1条答案

按热度按时间

pexxcrt21#

你说的是对的，变量还没有定义在这个点上。
在React中，通常在根组件中导入App.scss（通常是index.tsx）。
在App.scss中，您可以导入所有其余的scss文件。如果您在导入所有其余文件之前导入变量.scss，则它将在其他文件中可用。App.scss的示例如下：
App.scss文件（assets文件夹只是一个示例）

@import "../assets/_variables" (where color is declared)
@import "../assets/other-file" (where color is used)

根文件：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "./App.scss";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(<App />);

reportWebVitals();

赞(0）回复(0）举报 2022-11-26

我来回答

在声明问题之前，将javascriptReact为使用的typescript SCSS变量

1条答案

相关问题

热门标签

最新问答