React的Sass配置
React提供的脚手架creact-react-app创建的工程文件不像vue那种暴露出webpack来,所以添加依赖需要拐个弯。
为了配置sass需要按以下步骤进行:
一、安装sass-loader和node-sass依赖
- npm install sass-loader node-sass --save-dev
二、打开react的webpack配置
- node_modules/react-scripts/config/webpack.config.js
找到module下的rules,oneof数组中,然后找到最后一个配置,修改成如下的样子
- {
- loader: require.resolve('file-loader'),
- // Exclude `js` files to keep "css" loader working as it injects
- // its runtime that would otherwise be processed through "file" loader.
- // Also exclude `html` and `json` extensions so they get processed
- // by webpacks internal loaders.
- exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
- options: {
- name: 'static/media/[name].[hash:8].[ext]',
- },
- },
- // ** STOP ** Are you adding a new loader?
- // Make sure to add the new loader(s) before the "file" loader.
- {
- test:/\.scss$/,
- loaders: ['style-loader', 'css-loader', 'sass-loader']
- }
三、这样就可以愉快地使用scss文件了
React的Sass配置的更多相关文章
- react项目初始化配置
## [初始化项目](https://facebook.github.io/create-react-app/)) + 安装 ``` npx create-react-app myreact ``` ...
- 史上最全Windows版本搭建安装React Native环境配置
史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...
- 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用
史上最详细Windows版本搭建安装React Native环境配置 2016/01/29 | React Native技术文章 | Sky丶清| 95条评论 | 33530 views ...
- React Native环境配置
React Native环境配置 史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有 ...
- 认识sass和webstrom的sass配置
认识sass和webstrom的sass配置 我纳闷啊!电脑死机,我刚才编写的内容全没了. 呵呵! 一.sass的使用 1.首先要到官网下载个稳定的ruby版本,因为sass运行是需要ruby环境 它 ...
- React Native之配置URL Scheme(iOS Android)
React Native之配置URL Scheme(iOS Android) 一,需求分析 1.1,需要在网站中打开/唤起app,或其他app中打开app,则需要设置URL Scheme.比如微信的是 ...
- React Native环境配置之Windows版本搭建
接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...
- react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置
参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...
- windows 7下React Native环境配置
React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...
随机推荐
- ORALCE 数据库字符串处理、常用函数
.字符串转日期: to_date(paramStr,'YYYYMMDDHH24MISS') to_date(paramStr,'yyyy-MM-DD') to_date(paramStr,'yyyy/ ...
- python常用模块:sys、os、path、setting、random、shutil
今日内容讲了3个常用模块 一.sys模块二.os模块三.os下path模块四.random模块五.shutil模块 一.sys模块 import sys #环境变量 print(sys.path) # ...
- Vue快速学习_第五节
axios安装及使用 网站文档地址:https://www.kancloud.cn/yunye/axios/234845 1.npm安装 cnpm install axios 2.// 在main.j ...
- Java语言基础(12)
1 构造方法重载 在一个类内部,编写多个构造方法,创建对象的时候,根据需求的不同,调用不同的构造方法创建对象,实现不同的初始化. 案例:Demo1 public class Demo1 { publi ...
- Java语言基础(10)
1 方法(三) 案例:Demo1 import java.util.Scanner; public class Demo1 { static int min(int num1,int num2){ i ...
- CSS基础学习-5.CSS属性_字体文本文本装饰
- jenkins 批量修改svn 地址
svn服务器的ip变了,jenkins里那么多任务一个个修改要疯了, 每个已经创建后的任务的svn 地址都配置在 jenkins 主目录下的jobs 里对应的任务下的config.xml 里 在job ...
- Ubuntu系统没声音
问题: http://www.linuxdiyf.com/linux/22936.html $aplay -l 得到下面的信息ubuntu aplay: device_list:268: no so ...
- ESP8266—“ICACHE_FLASH_ATTR”宏——解释含义
const uint8 MyArr[1024] ICACHE_RODATA_ATTR = {0}; void MyFun() ICACHE_FLASH_ATTR { } 这种 ICACHE 开头的宏作 ...
- 什么是http协议(一)
http协议是大家在互联网中最为熟悉的协议,只要上网大家都会遇到,但是,很多人被问道什么是http协议,http协议的内容是什么就懵了.这里,我们随便聊聊http协议. 首先,我们说说协议.我一直觉得 ...