如何使create-react-app創建的react項目支持sass

zhangxiangliang 發布于2019-08-22 15:44 / 1250人閱讀

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

前言

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最簡單的配置方法了。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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