首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

createreactapp引入SASS样式

作者：qiuyaji4379 | 来源：互联网 | 2023-08-14 07:04
文章目录文章参考技术点引入SASS依赖库案例说明一、使用非模块的方式样式文件名.scss二、使用模块的方式样式文件名.module.scss文章参考React中CSSModule

文章目录

  • 文章参考
  • 技术点
  • 引入SASS 依赖库
  • 案例说明
    • 一、使用非模块的方式&＃96;样式文件名.scss&＃96;
    • 二、使用模块的方式&＃96;样式文件名.module.scss&＃96;


文章参考
  1. React中CSS Modules的使用

技术点
  1. 最新版本的create-react-app直接引入依赖库即可&＃xff0c;不需要修改配置文件&＃xff0c;将文件定义为scss类型
  2. 如果是想利用css module&＃xff0c;则只需要定义 [文件名].module.scss 即可

引入SASS 依赖库

npm install node-sass sass-loader --save

或者

yarn add node-sass sass-loader
案例说明

一、使用非模块的方式样式文件名.scss


  1. 样式的文件名HeaderComp.scss

.HeaderComp{&--logo{}&--nav{&__item{padding: 0 42px;font-size: 20px;&.active {color: #2C9767;letter-spacing: 0;}}}&--btns{}
}

  1. 在组件中直接引入样式文件

import React from &＃39;react&＃39;;
// 直接引入scss文件&＃xff0c;转为了css
import &＃39;./HeaderComp.scss&＃39;
import API from &＃39;&＃64;/api&＃39;export default class headerComp extends React.Component {render() {return (//

<div className&＃61;{&＃39;HeaderComp&＃39;}><div className&＃61;{&＃39;HeaderComp--logo&＃39;}></div><div className&＃61;{&＃39;HeaderComp--nav&＃39;}><div className&＃61;{&＃39;HeaderComp--nav__item&＃39; &＃43; &＃39; &＃39; &＃43; &＃39;active&＃39;}>首页</div><div className&＃61;{&＃39;HeaderComp--nav__item&＃39;}>专家</div><div className&＃61;{&＃39;HeaderComp--nav__item&＃39;}>经验</div><div className&＃61;{&＃39;HeaderComp--nav__item&＃39;}>会议管理</div></div><div className&＃61;{&＃39;HeaderComp--btns&＃39;}></div></div>);}
}
  1. 最终在浏览器渲染的效果&＃xff0c;如下

在这里插入图片描述

二、使用模块的方式样式文件名.module.scss


  1. 样式的文件名HeaderComp.module.scss

.HeaderComp{&--logo{}&--nav{&__item{padding: 0 42px;font-size: 20px;&.active {color: #2C9767;letter-spacing: 0;}}}&--btns{}
}

  1. 在组件中用一个对象来接收引入样式文件

import React from &＃39;react&＃39;;
// 直接引入scss文件&＃xff0c;转为了css
import styleObj from &＃39;./HeaderComp.module.scss&＃39;
import API from &＃39;&＃64;/api&＃39;export default class headerComp extends React.Component {render() {return (//

<div className&＃61;{styleObj[&＃39;HeaderComp&＃39;]}><div className&＃61;{styleObj[&＃39;HeaderComp--logo&＃39;]}></div><div className&＃61;{styleObj[&＃39;HeaderComp--nav&＃39;]}><div className&＃61;{styleObj[&＃39;HeaderComp--nav__item&＃39;] &＃43; &＃39; &＃39; &＃43; styleObj[&＃39;active&＃39;]}>首页</div><div className&＃61;{styleObj[&＃39;HeaderComp--nav__item&＃39;]}>专家</div><div className&＃61;{styleObj[&＃39;HeaderComp--nav__item&＃39;]}>经验</div><div className&＃61;{styleObj[&＃39;HeaderComp--nav__item&＃39;]}>会议管理</div></div><div className&＃61;{styleObj[&＃39;HeaderComp--btns&＃39;]}></div></div>);}
}
  1. 效果如图
    在这里插入图片描述

推荐阅读
  • main

    Go Cobra命令行工具入门教程

    Go Cobra命令行工具入门教程
    本文介绍了Go语言实现的命令行工具Cobra的基本概念、安装方法和入门实践。Cobra被广泛应用于各种项目中，如Kubernetes、Hugo和Github CLI等。通过使用Cobra，我们可以快速创建命令行工具，适用于写测试脚本和各种服务的Admin CLI。文章还通过一个简单的demo演示了Cobra的使用方法。 ... [详细]
  • settings

    Android Studio Bumblebee | 2021.1.1（大黄蜂版本使用介绍）

    Android Studio Bumblebee | 2021.1.1（大黄蜂版本使用介绍）
    本文介绍了Android Studio Bumblebee | 2021.1.1（大黄蜂版本）的使用方法和相关知识，包括Gradle的介绍、设备管理器的配置、无线调试、新版本问题等内容。同时还提供了更新版本的下载地址和启动页面截图。 ... [详细]
  • main

    python创建一个窗口_等一个大佬啊 要求用python创建一个窗口，窗口按钮功能是创建一个球体或立方体。明天上课之前交给我...

    展开全部下面的代码是创建一个立方体Thisexamplescreatesanddisplaysasimplebox.#Thefirstlineloadstheinit_disp ... [详细]
  • const

    PHP反射API的功能和用途详解

    PHP反射API的功能和用途详解
    本文详细介绍了PHP反射API的功能和用途，包括动态获取信息和调用对象方法的功能，以及自动加载插件、生成文档、扩充PHP语言等用途。通过反射API，可以获取类的元数据，创建类的实例，调用方法，传递参数，动态调用类的静态方法等。PHP反射API是一种内建的OOP技术扩展，通过使用Reflection、ReflectionClass和ReflectionMethod等类，可以帮助我们分析其他类、接口、方法、属性和扩展。 ... [详细]
  • const

    HashRouter 改为 Router 就全部空白页了。也不报错。

    本文讨论了将HashRouter改为Router后，页面全部变为空白页且没有报错的问题。作者提到了在实际部署中需要在服务端进行配置以避免刷新404的问题，并分享了route/index.js中hash模式的配置。文章还提到了在vueJs项目中遇到过类似的问题。 ... [详细]
  • get

    Vue模拟数据,实现路由进入商品详情页面的示例

    一、路由首先需要配置路由，就是点击good组件进入goodDetail组件配置路由如下{path:goodDetail,component:goodDetail}同时在good组件中写入如下点击事件，路由中加入 ... [详细]
  • spring

    Spring源码解密之默认标签的解析方式分析

    Spring源码解密之默认标签的解析方式分析
    本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断，区分默认命名空间和自定义命名空间，并采用不同的解析方式。其中，bean标签的解析最为复杂和重要。 ... [详细]
  • const

    伊振华作品 | 沈阳市智慧城市运行管理中心的设计与建设

    本文介绍了设计师伊振华受邀参与沈阳市智慧城市运行管理中心项目的整体设计，并以数字赋能和创新驱动高质量发展的理念，建设了集成、智慧、高效的一体化城市综合管理平台，促进了城市的数字化转型。该中心被称为当代城市的智能心脏，为沈阳市的智慧城市建设做出了重要贡献。 ... [详细]
  • perl

    Hyperledger Fabric外部链码构建与运行的开发笔记

    本文介绍了Hyperledger Fabric外部链码构建与运行的相关知识，包括在Hyperledger Fabric 2.0版本之前链码构建和运行的困难性，外部构建模式的实现原理以及外部构建和运行API的使用方法。通过本文的介绍，读者可以了解到如何利用外部构建和运行的方式来实现链码的构建和运行，并且不再受限于特定的语言和部署环境。 ... [详细]
  • include

    CF：3D City Model（小思维）问题解析和代码实现

    CF：3D City Model（小思维）问题解析和代码实现
    本文通过解析CF：3D City Model问题，介绍了问题的背景和要求，并给出了相应的代码实现。该问题涉及到在一个矩形的网格上建造城市的情景，每个网格单元可以作为建筑的基础，建筑由多个立方体叠加而成。文章详细讲解了问题的解决思路，并给出了相应的代码实现供读者参考。 ... [详细]
  • controller

    UIAlertController被解散后如何立即执行代码块

    有没有一种方法可以在不继承UIAlertController的子类或不涉及UIAlertActions的情况下 ... [详细]
  • controller

    如何在服务器主机上实现文件共享的方法和工具

    如何在服务器主机上实现文件共享的方法和工具
    本文介绍了在服务器主机上实现文件共享的方法和工具，包括Linux主机和Windows主机的文件传输方式，Web运维和FTP/SFTP客户端运维两种方式，以及使用WinSCP工具将文件上传至Linux云服务器的操作方法。此外，还介绍了在迁移过程中需要安装迁移Agent并输入目的端服务器所在华为云的AK/SK，以及主机迁移服务会收集的源端服务器信息。 ... [详细]
  • get

    Android View(一)-View坐标以及方法说明

    本文详细介绍了Android中的坐标系以及与View相关的方法。首先介绍了Android坐标系和视图坐标系的概念，并通过图示进行了解释。接着提到了View的大小可以超过手机屏幕，并且只有在手机屏幕内才能看到。最后，作者表示将在后续文章中继续探讨与View相关的内容。 ... [详细]
  • java

    可见性与scope的命名规范和变量生命周期

    本文介绍了在Go语言中可见性与scope的规则，包括在函数内外声明的可见性、命名规范和命名风格，以及变量声明和短变量声明的语法。同时，还介绍了变量的生命周期，包括包级别变量和局部变量的生命周期，以及变量在堆和栈上分配的规则和逃逸分析的概念。 ... [详细]
  • java

    SQL Server 2008 到底需要使用哪些端口？

    SQL Server 2008 到底需要使用哪些端口？
    SQLServer2008到底需要使用哪些端口？-下面就来介绍下SQLServer2008中使用的端口有哪些：　　首先，最常用最常见的就是1433端口。这个是数据库引擎的端口，如果 ... [详细]
author-avatar
qiuyaji4379
这个家伙很懒，什么也没留下！
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有