使用create-react-app脚手架搭建初始化项目

> npm install -g create-react-app

> npx create-react-app my-app

create-react-app构建的项目默认使用css语法,但是隐藏的webpack配置中配置支持了css/sass/scss

要想使用less/scss及全局样式/变量首先需要执行npm run eject命令暴露webpack等配置文件等信息

该操作不可逆,会在项目根目录中生成config(配置文件)和scripts(脚本命令文件)文件夹,同时会修改package.json和package-lock.json且删除package.json -> scripts中eject命令(不可再次执行)

使用scss:

首先npm install sass --save安装sass,默认安装了sass-loader没有安装sass

然后npm install sass-resources-loader --save-dev

修改config -> webpack.config.js如下:

这样就可以使用scss全局样式和变量了,需要重新npm start重启项目生效

如果习惯于less的语法,一定要在react项目中使用less的话,需要安装配置less

使用less:

首先npm install less less-loader --save

然后修改config -> webpack.config.js文件如下:

然后同上图scss的配置一样,只不过把sass/scss换成less就可以在react项目中使用less文件及全局样式和全局变量了

React项目中使用less/scss&全局样式/变量的更多相关文章

  1. react项目中使用less并修改antd主题样式

    一.react项目中使用less 1. 安装配置 npm i -D less less-loader 2. 查看webpack配置 npm run eject 此操作不可逆,生成新的目录. 3. 修改 ...

  2. 了解CSS in JS(JSS)以及在React项目中配置并使用JSS

    目录 认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处 好处 坏处 使用模块化CSS实现JSS 安装插件 在React项目中的tsconfig.json中添加配置 vscode项目中 ...

  3. react项目中实现元素的拖动和缩放实例

    在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...

  4. 在vue项目中 如何定义全局变量 全局函数

    如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的 ...

  5. React项目中实现右键自定义菜单

    最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...

  6. 在 Vuejs 项目中如何定义全局变量 全局函数

    在 Vuejs 项目中如何定义全局变量 全局函数 在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录 token, 用户的地址信息等,这时候就需要设置一波全局变量和 ...

  7. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  8. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  9. React项目中使用Mobx状态管理(二)

    并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...

随机推荐

  1. for循环打印九九乘法表

    学习目标: 熟练掌握 for 循环的使用 例题: 需求:打印九九乘法表 代码如下: // 九九乘法表 // row 为行,col为列 for(int row = 1; row < 10; row ...

  2. ABP源码分析 - 服务配置(1)

    比较随意,记录下过程,以便忘了以后重拾. 三个关注点 Program.cs internal static IHostBuilder CreateHostBuilder(string[] args) ...

  3. 攻防世界——stegano

    分析 1. 一个pdf,里边都是英文. 打开pdf "ctrl + F",检查flag 然活这里边直接告诉你,flag不在这里,一般都这么说了那就是真的不在了. 2. txt打开, ...

  4. Python入门-内置对象函数

    1.callable() 查看函数知否可调用,可调用返回True,不可用返回False print("input函数:", callable(input)) #input函数: T ...

  5. eBPF Cilium实战(1) - 基于团队的网络隔离

    在 Rainbond 集群中,每个团队对应于底层 Kubernetes 的一个 Namespace ,由于之前使用的底层网络无法进行 Namespace 级别的网络管理,所以在 Rainbond 同一 ...

  6. mybatis plus @TableId注解 type属性的含义

    首先该注解用在主键id上,它的type属性有8种类型 AUTO(0),NONE(1),INPUT(2),ASSIGN_ID(3),ASSIGN_UUID(4),ID_WORKER(3),ID_WORK ...

  7. B. Build the Permutation

    题目分析:我们先简单的分析一下这道题是在干什么啊,给我们三个整数n,a,b,问我们能否构造这样的排列使得序列中有a个极大值,b个极小值,能的话就给出任意一种可能的情况,不能的话就输出-1: 其实一开始 ...

  8. partOne测试收获总结

    测试收获总结   执行类中构造多个方法,将各个功能分解出来,将大的,复杂的问题转化成小的,简单的问题,来进行处理,正所谓复杂问题简单化,简单问题流程化.大道至简编程精益.现总结编程中的一些问题,①在J ...

  9. 2021.12.21 eleveni的刷题记录

    2021.12.21 eleveni的刷题记录 0. 有意思的题 P6701 [POI1997] Genotype https://www.luogu.com.cn/problem/P6701 状压优 ...

  10. 今天遇到 Could not determine type for: java.util.List

    今天遇到 Could not determine type for: java.util.List 用hibernate 映射好好的竟然出现这个问题 以前也遇到过,但不知道怎么给解决了,今天又遇到了, ...