上一节:

  React Sass

  • 什么是 Sass？

    Sass 是 CSS 预处理器。
    Sass 文件在服务器上执行，并将 CSS 发送到浏览器。
    您可以在我们的 Sass 教程 中了解有关 Sass 的更多信息。

  • 我可以使用 Sass 吗？

    如果在项目中使用 create-react-app，则可以在 React 项目中轻松安装和使用 Sass。
    通过在终端中运行以下命令来安装Sass：
    C:\Users\Administrator>myfirstreact>npm install node-sass
    现在您可以在项目中包含 Sass 文件了！

  • 创建一个 Sass 文件

    创建 Sass 文件的方式与创建 CSS 文件的方式相同，但是 Sass 文件的文件扩展名为 .scss
    在 Sass 文件中，您可以使用变量和其他 Sass 函数：
    mysass.scss: 
    $myColor: red;
h1 {
  color: $myColor;
}
    注意，本示例的 React 代码环境围绕 npm 的构建环境进行学习，如不懂可以先阅读 React 环境搭建这章进行了解学习
    导入 Sass 文件的方式与导入 CSS 文件的方式相同：
    index.js: 
    import React from 'react';
import ReactDOM from 'react-dom';
import './mysass.scss';

class MyHeader extends React.Component {
  render() {
      return (
        <div>
          <h1>Hello CSS 样式!</h1>
          <p>添加一点样式！</p>
        </div>
      );
  }
}

ReactDOM.render(<MyHeader />, document.getElementById('root'));

  • 相关页面

上一节: