如何在 React 中使用 Sass_react 使用sass-程序员宅基地

技术标签： react.js 项目前端编程 sass 网络研究观

Sass（语法很棒的样式表）是 CSS 的扩展，具有使其更强大的附加功能。Sass 最好的一点是它与 CSS 的兼容性，这意味着您可以在 Web 开发项目中使用 React 等 JavaScript 框架。

然而，与普通 CSS 不同，您需要进行一些设置才能使用 Sass。通过设置一个简单的 React.js 项目并将 Sass 与其集成来了解其工作原理。

如何在 React.js 项目中使用 Sass

与其他 CSS 处理器一样，React 本身并不支持 Sass。要在React中使用Sass，您需要通过yarn或npm等包管理器安装第三方依赖项。

您可以通过运行npm --version或yarn --version检查本地计算机上是否安装了 npm 或yarn 。如果您在终端中没有看到版本号，请先安装npm或yarn。

创建一个 React.js 项目

要遵循本指南，您可以使用 create-react-app 设置一个简单的 React.js 应用程序。

首先，使用命令行导航到要创建 React 项目的文件夹。然后运行npx create-react-app <appname>；这个过程可能需要一段时间。完成后，使用cd <appname>进入应用程序目录。将以下内容添加到您的App.js文件中作为启动项：

import React from "react"; 
import "./App.css"; 
function App() { 
return ( 
 <div className="wrapper"> 
  <h1>Using Sass in React</h1> 
  <header className="wrapper__btns"> 
   <button>Blue Button</button> 
   <button>Red Button</button> 
   <button>Green Button</button> 
  </header> 
 </div> ); 
} 
export default App;

一旦你建立了一个基本的 React 项目，就可以集成 Sass 了。

安装 Sass

您可以通过npm 或yarn 安装Sass。通过运行yarn add sass通过yarn 安装它，或者，如果您喜欢npm，运行npm install sass。您的包管理器会将最新版本的 Sass 添加到项目的package.json文件中的依赖项列表中。

将 .css 文件重命名为 .scss 或 .sass

在项目的文件夹中，将App.css和index.css分别重命名为App.scss和index.scss。

重命名这些文件后，您需要更新 App.js 和 index.js 文件中的导入以匹配新的文件扩展名，如下所示：

import "./index.scss";
import "./App.scss";

从现在开始，您应该对您创建的任何样式文件使用 .scss 扩展名。

导入和使用变量和混入

Sass最显着的优点之一是它可以帮助您使用变量和 mixin 编写干净、可重用的样式。虽然如何在 React 中执行相同操作可能并不明显，但它与在使用纯 JavaScript 和 HTML 编写的项目中使用 Sass 并没有太大不同。

你不需要在 React 中使用 sass 来在样式中使用变量。CSS 内置了对变量的支持。

首先，在src文件夹中创建一个新的Styles文件夹。在 Styles 文件夹中，创建两个文件：_variables.scss和_mixins.scss。将以下规则添加到 _variables.scss：

$background-color: #f06292;
$text-color: #f1d3b3;
$btn-width: 120px;
$btn-height: 40px;
$block-padding: 60px;

并将以下内容添加到 _mixins.scss 中：

@mixin vertical-list {
    display: flex;
    align-items: center;
    flex-direction: column;
}

然后在 App.scss 中导入变量和 mixin，如下所示：

@import "./Styles/variables";
@import "./Styles/mixins";

在 App.scss 文件中使用变量和 mixin：

@import "./Styles/variables.scss";
@import "./Styles/mixins";
.wrapper {
  background-color: $background-color;
  color: $text-color;
  padding: $block-padding;

  &__btns {
    @include vertical-list;
    button {
      width: $btn-width;
      height: $btn-height;
    }
   }
}

这就是在 React 中使用变量和 mixins 的方式。除了 mixins 和变量之外，您还可以使用 Sass 中所有其他很棒的功能，例如函数。只要你在 React 项目中设置了 scss 就没有限制。

在 React.js 中使用 Sass

Sass 在 CSS 之上提供了更多功能，这正是您编写可重用 CSS 代码所需要的。

您可以开始在 React 中使用 Sass，方法是通过 npm 或 yarn 安装 sass 包，将 CSS 文件更新为 .scss 或 .sass，然后更新导入以使用新的文件扩展名。之后，你就可以开始在React中编写SCSS了。

本文链接：https://blog.csdn.net/qq_29607687/article/details/131526144

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

系统架构师考试经验分享_中级架构师好考吗-程序员宅基地

文章浏览阅读2.8k次。目录前言考前复习考试过程考试结果证书领取前言新的一年系统架构师考试前，分享一下之前参加系统架构师考试的经验，以及考过后如何领证书。软考报名地址中国计算机技术职业资格网。考前复习考前由于工作原因，我个人只在考试前一周突击复习，时间允许的话，还是多匀一些时间复习，会比较有把握。架构师考试分3部分：上午的综合知识选择题考试，下午的案例分析考试及论文。复习的重点应该安排在综合知识及案例分析，论文则是在靠前根据以往的项目经验，确定好论文的内容，在考试时选择接近的论文题目即可（例如，我在以前参与过云平台的_中级架构师好考吗

多体素模式分析(MVPA)和表征相似性分析(RSA)-程序员宅基地

文章浏览阅读7.6k次，点赞17次，收藏82次。目录一、学习资源二、MVPA分析工具——pronto1.下载安装2.参考视频地址3.基本步骤(一)Data&Design(二)Prepare feature set 准备特征集(三)确定并且跑一个模型(四)看结果(五)检测哪些特征对模型的建立提供了更多的信息一、学习资源RSA学习链接1 https://www.zhihu.com/question/268530028二、MVPA分析工具——pronto1.下载安装github下载地址ht.._表征相似性分析

区域生长算法原理及MATLAB实现_区域生长原理-程序员宅基地

文章浏览阅读8.6k次，点赞3次，收藏24次。1. 基于区域生长算法的图像分割原理数字图像分割算法一般是基于灰度值的两个基本特性之一：不连续性和相似性。前一种性质的应用途径是基于图像灰度的不连续变化分割图像，比如图像的边缘。第二种性质的主要应用途径是依据实现指定的准则将图像分割为相似的区域。区域生长算法就是基于图像的第二种性质，即图像灰度值的相似性。1.1 基本公式令R表示整幅图像区域，那么分割可以看成将区域R划分为n个子区域R1..._区域生长原理

卸载出错：error reading information on service impala-catalog: No such file or directory error: %preun(i_error reading information on service bgpd:-程序员宅基地

文章浏览阅读2k次。卸载出错：error reading information on service impala-catalog: No such file or directory error: %preun(impala-catalog-2.11.0+cdh5.14.0+0-1.cdh5.14.0.p0.50.el6.x86_64) scriptlet failed, exit status 1卸载impala的依赖报错相信大家再卸载的时候都用用过很多方法用了好多种方法才发现的方法好用，建议大家收藏，以后用_error reading information on service bgpd:

用python画小猪佩奇代码_用python画个小猪佩奇(turtle示例源码)-程序员宅基地

文章浏览阅读1k次。【实例简介】来副小猪佩奇,用python画个小猪佩奇【实例截图】【核心代码】# coding:utf-8import turtle as tdef nose(x,y):#鼻子t.pu()t.goto(x,y)t.pd()t.seth(-30)t.begin_fill()a=0.4for i in range(120):if 0..._python米奇代码

PhotonOS入门_photon os 教程-程序员宅基地

文章浏览阅读4.3k次。PhotonOS是VMware专为ESXi定制的容器操作系统，当前版本3.0，内核4.19，已内置Docker；ESXi直接导入ova文件即可使用；配置1. 软件包管理Photon OS使用TDNF代替yum，但与yum命令基本相同；2. 服务管理Photon OS使用systemd；3. 网络配置Photon OS网络服务为systemd-networkd；4..._photon os 教程

随便推点

ROS 打包报错 /usr/bin/ld: cannot find -lpthreads_performing test cmake_have_libc_pthread - failed-程序员宅基地

文章浏览阅读742次，点赞5次，收藏8次。ROS打包错误: /usr/bin/ld: cannot find -lpthreads 的解决_performing test cmake_have_libc_pthread - failed

深度神经网络模型压缩_深度网络模型压缩-程序员宅基地

文章浏览阅读1.7k次。“本文介绍的论文全面概述了深度神经网络的压缩方法，主要可分为参数修剪与共享、低秩分解、迁移/压缩卷积滤波器和知识精炼，本论文对每一类方法的性能、相关应用、优势和缺陷等进行独到的分析。” 大型神经网络具有大量的层级与结点，因此考虑如何减少它们所需要的内存与计算量就显得极为重要，特别是对于在线学习和增量学习等实时应用。此外，近来智能可穿戴设备的流行也为研究员提供了在资源（内存、CPU、能..._深度网络模型压缩

TortoiseGit的介绍和使用-程序员宅基地

文章浏览阅读4.4w次，点赞23次，收藏254次。 Git是什么，相信大家都很清楚。Git不就是分布式版本控制系统嘛？那你知道TortoiseGit是什么吗？下面我们就介绍一下TortoiseGit它是什么？如何使用？ TortoiseGit其实是一款开源的git的版本控制系统，也叫海龟git。TortoiseGit提供了人性化的图形化界面，不用像Git一样输入许多语句，像git init、git add、git commit这些语句就通通不用记了。轻松使用鼠标，就可以完成代码的提交和上传。对于使用本地Git的新手来说，TortoiseGit的更加简_tortoisegit

离线安装RabbitMQ，非root普通用户启动RabbitMQ_rabbitmq离线安装教程-程序员宅基地

文章浏览阅读3.6k次。离线安装RabbitMQ，非root普通用户启动RabbitMQ。_rabbitmq离线安装教程

java script实训心得_javascript实训报告总结.docx-程序员宅基地

文章浏览阅读1.1w次，点赞5次，收藏27次。javascript实训报告总结Javascript实训报告　　专业名称:计算机应用技术　　班级名称：　　学员姓名：　　指导教师：_______________　　完成日期：　　一、简介：　　Web标准并不是一个单一的标准，而是一个系列的标准的集合。Web标准中具有代表性的几种语言有：XML可扩展标记语言、XHTML可扩展超文本标记语言、CSS层叠样式表、DOM文档对象模型、JavaScript脚..._javascript实训报告

Android O Android P 自定义开机广播_flag_receiver_include_background-程序员宅基地

文章浏览阅读4.1k次，点赞4次，收藏14次。背景一般来说，我们都是用的监听android.intent.action.BOOT_COMPLETED。但凡稍有些经验的开发者都知道，这个广播很慢，非常慢。因为它是一个有序广播，根据优先级来的，而且监听这个广播的apk又非常多。打个log感受一下，这个广播开始到结束在我司的机器上持续了30s!关键是你把优先级调高了，即便你是前几个收到android.intent.action.BO..._flag_receiver_include_background