一、先上官方文档

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc

二、临时解决方法

1.安装

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

2.到目录 node_modules/react-scripts/config 下 找到 webpack.config.dev.js 文件,进行添加,详细位置看下图

{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
}

三.推荐使用

当然了,不介意去node_modules 改配置,多人开发时需要每个人都去修改,是不合理的。最好先把config包拉到项目里,然后再修改。

react create-react-app 怎么添加sass的更多相关文章

  1. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  2. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

  3. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  4. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  5. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  6. react修改app.js添加中文内容后中文部分乱码解决

    [问题]:配置完react后修改app.js内容时添加中文出现如下乱码的中文. [A解决]文档——文本编码——转换文本编码,在弹出窗口修改,确定,搞定 [B解决]首先在EditPlus内:工具——首选 ...

  7. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  8. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  9. [React] Create & Deploy a Universal React App using Zeit Next

    In this lesson, we'll use next to create a universal React application with no configuration. We'll ...

  10. React Native发布APP之打包iOS应用

    用React Native开发好APP之后,如何将APP发布以供用户使用呢?一款APP的发布流程无外乎:签名打包—>发布到各store这两大步骤.本文将向大家分享如何签名打包一款React Na ...

随机推荐

  1. vscode设置

    通过ctrl+滚轮实现字体大小改变:在文件-->首选项-->设置-->用户设置中添加如下代码:"editor.mouseWheelZoom": true,

  2. FCC(ES6写法) Friendly Date Ranges

    把常见的日期格式如:YYYY-MM-DD 转换成一种更易读的格式. 易读格式应该是用月份名称代替月份数字,用序数词代替数字来表示天 (1st 代替 1). 包含当前年份和相同月份的时候,makeFri ...

  3. 合适么?现在学ASP.NET Core入门编程……

    现在都快找不到ASP.NET的培训课程了. 知道我要开课做培训,有同学劝我:“憋讲那什么.NET,讲Java,现在这个火!”我说我Java不熟,“唉呀!C#转Java,分分钟的事!以飞哥你的经验,…… ...

  4. 1.8 Double-Opening and Virtual Machine

    Since plug-in will be replaced by RN as following years, what is the future of plug-in? the answer i ...

  5. 实战经验丨PHP反序列化漏洞总结

    又到了金三银四跳槽季,很多小伙伴都开始为面试做准备,今天小编就给大家分享一个网安常见的面试问题:PHP反序列化漏洞. 虽然PHP反序列化漏洞利用的条件比较苛刻,但是一旦被利用就会产生很严重的后果,所以 ...

  6. [Swift]LeetCode879. 盈利计划 | Profitable Schemes

    There are G people in a gang, and a list of various crimes they could commit. The i-th crime generat ...

  7. Java中需要知道的关键字

    Java中有一些或常用,或不常用,但却不得不知关键字,本篇文章将讨论这些关键字的作用. transient transient关键字可能用的不是那么频繁,但却是一个很重要的关键字,它的作用是在对象序列 ...

  8. selenium之 chromedriver与chrome版本映射表(更新至v2.43)

    看到网上基本没有最新的chromedriver与chrome的对应关系表,便兴起整理了一份如下,希望对大家有用: chromedriver版本 支持的Chrome版本 chromedriver版本 支 ...

  9. Http协议状态码总结

    一.http方法 方法名 说明 get 发送一个获取请求,服务器的响应会包含head与body部分 post 发送一个输入数据的请求,服务器的响应会包含head与body部分 head 服务器响应的只 ...

  10. 说一说MVC的CompressActionFilterAttrubute(五)

    通过action对文件流压缩,提高带宽速度!!! 引用using System.IO.Compression; public override void OnActionExecuting(Actio ...