如何将 node-sass 安装到 React 项目？

Sass 是一种脚本语言，被编译成级联样式表 (CSS)。它是一种预处理器语言。它最初由 Hampton Catlin 设计，然后由 Natalie Weizenbaum 开发。在最初的版本之后，Weizenbaum 和 Chris Eppstein 继续使用 SassScript 扩展 SASS。它支持四种数据类型，分别是数字、字符串、颜色和布尔值。嵌套也适用于这种语言。

先决条件：

基本的 ReactJS的知识

安装过程：

使用 npm 添加 sass：
```
npm install node-sass --save
```
使用纱线添加 sass：
```
yarn add node-sass
```

注意：现在您可以将 App.css 重命名为 App.scss 并更新 App.js 以导入 App.scss。如果使用扩展名 .scss 或 .sass 导入此文件和任何其他文件，将自动编译。

示例：一旦您按照上述步骤操作，则意味着您已经成功安装了 sass，您可以开始使用它了。

App.sass：正如您在 sass 文件的代码中看到的那样，我们可以使用变量，也可以在 sass 文件中执行算术运算。这就是使用 sass 的优势。

HTML

$bg:rgb(88, 235, 88);
$border-color : black;
  
    
.main-block{
  
  background-color: $bg;
  height: 4px / 100px  * 100% ;
  border: 1px solid $border-color;
  text-align: center;
  
}

Javascript

import logo from './logo.svg';
import './App.scss';
  
function App() {
  return (
    
      
        
          

          Edit src/App.js and save to reload.
        
  
        
          Learn React
        
      
    
  );
}
  
export default App;

应用程序.js

Javascript

import logo from './logo.svg';
import './App.scss';
  
function App() {
  return (
    
      
        
          

          Edit src/App.js and save to reload.
        
  
        
          Learn React
        
      
    
  );
}
  
export default App;

输出：