React.js 中的 Bulma 变量？

Question

我在我的 React.js 项目中安装了 Bulma。

我有一个简单的组件，我正在尝试自定义颜色：

function Colortest() {
  return (
    <div>
      <section className="hero $black">
        <h1>Color Test</h1>
      </section>
    </div>
  );
}
export default Colortest;

is-primary 与许多其他 Bulma 风格一起工作。然而，当我尝试使用一些 variables 时，它不起作用。

这是我根 package.json 文件中的“依赖项”：

"dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },

这是我的 App.js 文件：

import "bulma/css/bulma.min.css";
import Header from './components/Header';
import Body from './components/Body';
import Colortest from "./components/Colortest";

const App = () => {
  return (
    <div>
      <Header />
      <Colortest />
      <Body />
    </div>
  );
};

export default App;

显然，我遗漏了一些简单的东西。我做错了什么？

Answer 1

Bulma uses Sass variables

要在 Bulma 中使用变量，您必须在项目中安装和配置 SASS，这是一个 CSS 编译器。

您可以检查 bulma-start 配置了这些依赖项的起始项目。

安装这些依赖项后，您必须编写自己的 .scss 或 .sass 文件，如

// styles.scss file
@import "bulma/bulma.sass";

.colortest {
  color: $white;
  background-color: $black;
}

或者，.sass 文件为

// styles.sass
@import "bulma/bulma.sass"

.colortest 
  color: $white
  background-color: $black

在此之后，您只需将此样式导入到您的组件中，如

import "./styles.scss"
// or,
// import "./styles.sass"

检查此 codesandbox 以获得工作示例。

React.js 中的 Bulma 变量？

Bulma variables in React.js?

javascript

reactjs

bulma

Bulma uses Sass variables

参考文献：