一、先上官方文档

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. Luogu P1381油滴扩展

    传送门 数据范围给的很小啊,n >= 0 && n <= 7,所以给了DFS生存的空间. 对于每一个油滴,可以说在它下一个油滴放置之前,当前的这个油滴的半径并不确定(但是对 ...

  2. Python课程学习总结

    Python的介绍 Python是一种高级动态.完全面向对象的语言,函数.模块.数字.字符串都是对象,并且完全支持继承.重载.派生.多继承,有益于增强源代码的复用性. Python是一种计算机程序设计 ...

  3. 业务配置开发平台qMISPlat 2.0 产品介绍

    qMISPlat是什么 qMISPlat(业务配置开发平台)是一套基于.net core 2.0.跨平台的,面向开发人员和具有一定技术水平的业务人员使用的业务配置开发平台.基于此平台您只需通过配置和少 ...

  4. 1.9 From Native to HTML5

    The mobile technology has become more and more mature, and it has evolved from a ridiculous situatio ...

  5. NeuChar 平台使用及开发教程 索引

    什么是 NeuChar? NeuChar 是由盛派(Senparc)团队发布的新一代跨平台服务系统,其中包含了开放的跨平台通讯标准及核心计算模块(Senparc.NeuChar.dll)以及配套的云管 ...

  6. Javascript高级编程学习笔记(87)—— Canvas(4)绘制路径

    绘制路径 2D上下文支持许多在画布上绘制路径的方法 通过路径可以创造出复杂的形状和线条,要绘制路径首先必须调用beginPath()方法,表示开始绘制路径 然后再通过下列的方法绘制路径: arc(x, ...

  7. [Swift]LeetCode924.尽量减少恶意软件的传播 | Minimize Malware Spread

    In a network of nodes, each node i is directly connected to another node j if and only if graph[i][j ...

  8. Curl 请求数据多’1‘

    今天做curl请求时遇到一个问题 数据请求回来,无缘无故多了1 加上这一行代码就就可以了:curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);

  9. docker删除镜像和删除容器

    删除容器:docker rm ID 删除镜像:docker rmi ID

  10. Jenkins结合.net平台综合应用之通过SSH方式拉取代码

    上一节我们讲解了如何Jenkins如何通过轮训来监听git仓库变化然后拉取最新代码,上一节中我们使用的是https方式,然后正式环境中企业更倾向使用ssh方式.这里我们讲解一下如何通在Jenkins中 ...