上一节:

  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'));
    
上一节: