颜色:未定义变量：“$bg-SassError”

Question

无论我做什么尝试，我都会得到这个错误：

SassError: Undefined variable: "$bg-color".
        on line 2 of src/scss/box.scss
>>   background: $bg-color;

要重现问题，请键入npx create-react-app blahblah，然后键入npm install --save-dev node-sass。

这是我的文件

// ./src/App.js
import './scss/app.scss';
import Box from './Box';
const App = () => <Box />;
export default App;

// ./src/Box.js
import './scss/box.scss';
const Box = () => <div className="box"></div>;
export default Box;

// ./src/scss/app.scss
@import './_variables.scss';

// ./src/scss/_variables.scss
$bg-color: red;

// ./src/scss/box.scss
.box {
  background: $bg-color;
}

然后键入npm start查看错误。

我已经尝试在我所有的scss文件前面加上下划线，没有下划线，有些有下划线，有些不带下划线，无论我使用哪种组合，我仍然得到etc....no变量错误。

我做错了什么？

Answer 1

如果您希望某个变量在SCSS文件中可用，则该变量需要是本地变量或直接导入变量。

否则，如果您有全局作用域变量，您可以首先使用CSS变量，以避免导入。

在app.scss中：

body {
  --bg-color: red;
}

在其他文件中

.box {
   background-color: var(--bg-color);
}