如何使create-react-app创建的react项目支持sass

zhangxiangliang 发布于2019-08-22 15:44 / 1231人阅读

摘要：前言打包同样是用的，所以使其支持其实是和我们自行初始化的项目一样的，只是的配置文件所在目录不一样。下面是操作步骤首先安装和两个依赖。

前言

create-react-app打包同样是用的webpack，所以使其支持sass其实是和我们自行初始化的项目一样的，只是webpack的配置文件所在目录不一样。所以只要找到配置文件所在的目录，然后按照一般webpack的配置方法配置就好。

下面是操作步骤

首先安装sass-loader和node-sass两个依赖。

yarn add sass-loader node-sass

然后修改node_module文件夹下react-scripts里面关于webpack的配置文件

具体文件路径为：./node_module/react-scripts/config/webpack.config.dev.js 注意：这是开发时的配置文件，打包还需要再配置webpack.config.prod.js文件

具体修改内容就是在配置文件里面添加：

{
    test: /.scss$/,
    use: [
      "style-loader",
      "css-loader",
      "sass-loader"
    ]
}

具体位置就是在css配置的下面

{
  test: /.css$/,
....

以上就是使create-react-app支持sass最简单的配置方法了。

GPU云服务器云服务器 create-react-app 怎么部署react项目 react编译后webrtc不支持如何成为阿里云大使

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93703.html

create-react-app 中添加sass less以及配置全局变量

摘要：由于中没有内置或者这种预编译的工具这篇文章即为如何添加或者工具暴露配置首先全局下载创建一个项目然后暴露出的配置这里需要注意的是这个命令则是暴露出配置的命令添加然后安装找到文件中的中找到在它里面已经配置了很多由于create-react-app中没有内置sass或者less这种预编译的工具, 这篇文章即为如何添加sass或者less工具. 暴露webpack配置首先全局下载creat...

mindwind 2019-08-22 16:10 评论0 收藏0
react 项目构建

摘要：配置方式找到文件如需添加路由则在里面添加，同时需要后端更改配置除了上面的路径，其他路径全部指向单页应用多路由预渲染指南使用说明源码为方便快速构建项目，本例所有配置的代码均放在项目中。写在前面每次构建react项目的时候都会配置一大堆东西，时间久了就会忘记怎么配置。为了方便自己记忆也为了其他开发者在构建react应用时能够快速开发，故作此记录。本项目基于 create-react-...

ACb0y 2019-08-23 11:54 评论0 收藏0
初探react技术栈（一）

摘要：相信用的同学也不少找到函数在其中中添加启用编译。。。react 最近已经开始使用react技术栈了，从头开始搭建项目，有必要的记录一下配置的过程以及项目分层的思路，这次后台项目采用的主要采用react-create-app脚手架以及Ant DesignUI 以及多语言react-intl create-react-app 这是官方维护的脚手架应用我们一般也采用这个 $ npm or c...

刘玉平 2019-05-23 16:23 评论0 收藏0
初探React技术栈（一）

react 最近已经开始使用react技术栈了，从头开始搭建项目，有必要的记录一下配置的过程以及项目分层的思路，这次后台项目采用的主要采用react-create-app脚手架以及Ant DesignUI 以及多语言react-intl create-react-app 这是官方维护的脚手架应用我们一般也采用这个 $ npm or cnpm $ npm install create-react...

neroneroffy 2019-08-26 13:53 评论0 收藏0
指尖前端重构（React）技术调研分析

摘要：一为什么选择是当前前端应用最广泛的框架。目前来看的生态系统要比大的多，在等最大的技术社区搜索两者，的搜索结果是的十倍左右，另外据近期统计使用的站点是的几百倍以上。其中是基于技术，依然是浏览器应用。一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早，但其在原理上并没有React创新的性能优化...

AlphaWallet 2019-08-23 18:18 评论0 收藏0