如何使create-react-app創(chuàng)建的react項(xiàng)目支持sass

zhangxiangliang 發(fā)布于2019-08-22 15:44 / 1260人閱讀

摘要：前言打包同樣是用的，所以使其支持其實(shí)是和我們自行初始化的項(xiàng)目一樣的，只是的配置文件所在目錄不一樣。下面是操作步驟首先安裝和兩個(gè)依賴。

前言

create-react-app打包同樣是用的webpack，所以使其支持sass其實(shí)是和我們自行初始化的項(xiàng)目一樣的，只是webpack的配置文件所在目錄不一樣。所以只要找到配置文件所在的目錄，然后按照一般webpack的配置方法配置就好。

下面是操作步驟

首先安裝sass-loader和node-sass兩個(gè)依賴。

yarn add sass-loader node-sass

然后修改node_module文件夾下react-scripts里面關(guān)于webpack的配置文件

具體文件路徑為：./node_module/react-scripts/config/webpack.config.dev.js 注意：這是開(kāi)發(fā)時(shí)的配置文件，打包還需要再配置webpack.config.prod.js文件

具體修改內(nèi)容就是在配置文件里面添加：

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

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

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

以上就是使create-react-app支持sass最簡(jiǎn)單的配置方法了。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93703.html

相關(guān)文章

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

摘要：由于中沒(méi)有內(nèi)置或者這種預(yù)編譯的工具這篇文章即為如何添加或者工具暴露配置首先全局下載創(chuàng)建一個(gè)項(xiàng)目然后暴露出的配置這里需要注意的是這個(gè)命令則是暴露出配置的命令添加然后安裝找到文件中的中找到在它里面已經(jīng)配置了很多由于create-react-app中沒(méi)有內(nèi)置sass或者less這種預(yù)編譯的工具, 這篇文章即為如何添加sass或者less工具. 暴露webpack配置首先全局下載creat...

mindwind 2019-08-22 16:10 評(píng)論0 收藏0
react 項(xiàng)目構(gòu)建

摘要：配置方式找到文件如需添加路由則在里面添加，同時(shí)需要后端更改配置除了上面的路徑，其他路徑全部指向單頁(yè)應(yīng)用多路由預(yù)渲染指南使用說(shuō)明源碼為方便快速構(gòu)建項(xiàng)目，本例所有配置的代碼均放在項(xiàng)目中。寫(xiě)在前面每次構(gòu)建react項(xiàng)目的時(shí)候都會(huì)配置一大堆東西，時(shí)間久了就會(huì)忘記怎么配置。為了方便自己記憶也為了其他開(kāi)發(fā)者在構(gòu)建react應(yīng)用時(shí)能夠快速開(kāi)發(fā)，故作此記錄。本項(xiàng)目基于 create-react-...

ACb0y 2019-08-23 11:54 評(píng)論0 收藏0
初探react技術(shù)棧（一）

摘要：相信用的同學(xué)也不少找到函數(shù)在其中中添加啟用編譯。。。react 最近已經(jīng)開(kāi)始使用react技術(shù)棧了，從頭開(kāi)始搭建項(xiàng)目，有必要的記錄一下配置的過(guò)程以及項(xiàng)目分層的思路，這次后臺(tái)項(xiàng)目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語(yǔ)言react-intl create-react-app 這是官方維護(hù)的腳手架應(yīng)用我們一般也采用這個(gè) $ npm or c...

劉玉平 2019-05-23 16:23 評(píng)論0 收藏0
初探React技術(shù)棧（一）

react 最近已經(jīng)開(kāi)始使用react技術(shù)棧了，從頭開(kāi)始搭建項(xiàng)目，有必要的記錄一下配置的過(guò)程以及項(xiàng)目分層的思路，這次后臺(tái)項(xiàng)目采用的主要采用react-create-app腳手架以及Ant DesignUI 以及多語(yǔ)言react-intl create-react-app 這是官方維護(hù)的腳手架應(yīng)用我們一般也采用這個(gè) $ npm or cnpm $ npm install create-react...

neroneroffy 2019-08-26 13:53 評(píng)論0 收藏0
指尖前端重構(gòu)（React）技術(shù)調(diào)研分析

摘要：一為什么選擇是當(dāng)前前端應(yīng)用最廣泛的框架。目前來(lái)看的生態(tài)系統(tǒng)要比大的多，在等最大的技術(shù)社區(qū)搜索兩者，的搜索結(jié)果是的十倍左右，另外據(jù)近期統(tǒng)計(jì)使用的站點(diǎn)是的幾百倍以上。其中是基于技術(shù)，依然是瀏覽器應(yīng)用。一、為什么選擇React React是當(dāng)前前端應(yīng)用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現(xiàn)最早，但其在原理上并沒(méi)有React創(chuàng)新的性能優(yōu)化...

AlphaWallet 2019-08-23 18:18 評(píng)論0 收藏0