1、安裝create-react-app
使用 create-react-app 配置 react 開發(fā)環(huán)境，像下面這樣，就可以構(gòu)建一個(gè)新的 react 單頁(yè)面應(yīng)用，非常方便。
npm install -g create-react-app??? //用 npm安裝 create-react-app
create-react-app my-app??????????????//用 create-react-app 創(chuàng)建自建項(xiàng)目 my-app
cd my-app ????????????????????????????????????//進(jìn)入自建項(xiàng)目?my-app
npm start? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//npm 啟動(dòng)
2、安裝 SASS
但是現(xiàn)在的 create-react-app（react.15.6.1） 去掉了默認(rèn)支持Sass等預(yù)處理器，官方文檔說(shuō)明，有如何配置預(yù)處理器，如果我們要使用預(yù)處理器時(shí)，就需要我們自己來(lái)配置，在按著官方文檔進(jìn)行配置時(shí)，npm start 是有效果的，但是當(dāng)我改動(dòng) scss 文件時(shí)，就會(huì)報(bào)錯(cuò)。然后就在網(wǎng)上查找了一些相關(guān)配置，發(fā)現(xiàn)這樣也是可以的：
安裝依賴
npm install sass-loader node-sass --save-dev
如果長(zhǎng)時(shí)間安裝不上，試試淘寶鏡像
可以先下載一下淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后就可以使用cnpm啦
cnpm i sass-loader node-sass --save-dev
就這樣，搞定~
在node_modules/react-scripts/config下找到 webpack.config.dev.js 文件，在 exclude 中添加?/.scss$/,
并在loaders中添加一項(xiàng)：
{
????test:/\.scss$/,
????loaders:['style-loader','css-loader','sass-loader'],
},
像這樣：
至此，Sass 就配置好了。
注意，我們只是修改了?webpack.config.dev.js?,如果要在生產(chǎn)環(huán)境中生效，需要在webpack.config.prod.js做同樣的配置。
3、引入千牛UI測(cè)試一下
安裝QNUI
QNUI提供了npm包的引入方式，在項(xiàng)目目錄下運(yùn)行
npm install qnui --save
在文件頭部引入QNUI
import 'qnui/lib/button/index.scss';
import Button from 'qnui/lib/button';?
重新npm start?
完成！
如果對(duì)你有幫助，請(qǐng)點(diǎn)贊收藏！
參考文章：點(diǎn)此查看
