React提供的脚手架creact-react-app创建的工程文件不像vue那种暴露出webpack来,所以添加依赖需要拐个弯。

为了配置sass需要按以下步骤进行:

一、安装sass-loader和node-sass依赖

  1. npm install sass-loader node-sass --save-dev

二、打开react的webpack配置

  1. node_modules/react-scripts/config/webpack.config.js

找到module下的rules,oneof数组中,然后找到最后一个配置,修改成如下的样子

  1. {
  2. loader: require.resolve('file-loader'),
  3. // Exclude `js` files to keep "css" loader working as it injects
  4. // its runtime that would otherwise be processed through "file" loader.
  5. // Also exclude `html` and `json` extensions so they get processed
  6. // by webpacks internal loaders.
  7. exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
  8. options: {
  9. name: 'static/media/[name].[hash:8].[ext]',
  10. },
  11. },
  12. // ** STOP ** Are you adding a new loader?
  13. // Make sure to add the new loader(s) before the "file" loader.
  14. {
  15. test:/\.scss$/,
  16. loaders: ['style-loader', 'css-loader', 'sass-loader']
  17. }

    

三、这样就可以愉快地使用scss文件了

React的Sass配置的更多相关文章

  1. react项目初始化配置

    ## [初始化项目](https://facebook.github.io/create-react-app/)) + 安装 ``` npx create-react-app myreact ``` ...

  2. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  3. 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用

    史上最详细Windows版本搭建安装React Native环境配置   2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views ...

  4. React Native环境配置

    React Native环境配置 史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有 ...

  5. 认识sass和webstrom的sass配置

    认识sass和webstrom的sass配置 我纳闷啊!电脑死机,我刚才编写的内容全没了. 呵呵! 一.sass的使用 1.首先要到官网下载个稳定的ruby版本,因为sass运行是需要ruby环境 它 ...

  6. React Native之配置URL Scheme(iOS Android)

    React Native之配置URL Scheme(iOS Android) 一,需求分析 1.1,需要在网站中打开/唤起app,或其他app中打开app,则需要设置URL Scheme.比如微信的是 ...

  7. React Native环境配置之Windows版本搭建

    接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...

  8. react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

    参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...

  9. windows 7下React Native环境配置

    React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...

随机推荐

  1. ORALCE 数据库字符串处理、常用函数

    .字符串转日期: to_date(paramStr,'YYYYMMDDHH24MISS') to_date(paramStr,'yyyy-MM-DD') to_date(paramStr,'yyyy/ ...

  2. python常用模块:sys、os、path、setting、random、shutil

    今日内容讲了3个常用模块 一.sys模块二.os模块三.os下path模块四.random模块五.shutil模块 一.sys模块 import sys #环境变量 print(sys.path) # ...

  3. Vue快速学习_第五节

    axios安装及使用 网站文档地址:https://www.kancloud.cn/yunye/axios/234845 1.npm安装 cnpm install axios 2.// 在main.j ...

  4. Java语言基础(12)

    1 构造方法重载 在一个类内部,编写多个构造方法,创建对象的时候,根据需求的不同,调用不同的构造方法创建对象,实现不同的初始化. 案例:Demo1 public class Demo1 { publi ...

  5. Java语言基础(10)

    1 方法(三) 案例:Demo1 import java.util.Scanner; public class Demo1 { static int min(int num1,int num2){ i ...

  6. CSS基础学习-5.CSS属性_字体文本文本装饰

  7. jenkins 批量修改svn 地址

    svn服务器的ip变了,jenkins里那么多任务一个个修改要疯了, 每个已经创建后的任务的svn 地址都配置在 jenkins 主目录下的jobs 里对应的任务下的config.xml 里 在job ...

  8. Ubuntu系统没声音

    问题: http://www.linuxdiyf.com/linux/22936.html $aplay -l 得到下面的信息ubuntu  aplay: device_list:268: no so ...

  9. ESP8266—“ICACHE_FLASH_ATTR”宏——解释含义

    const uint8 MyArr[1024] ICACHE_RODATA_ATTR = {0}; void MyFun() ICACHE_FLASH_ATTR { } 这种 ICACHE 开头的宏作 ...

  10. 什么是http协议(一)

    http协议是大家在互联网中最为熟悉的协议,只要上网大家都会遇到,但是,很多人被问道什么是http协议,http协议的内容是什么就懵了.这里,我们随便聊聊http协议. 首先,我们说说协议.我一直觉得 ...