1、安装create-react-app

使用 create-react-app 配置 react 开发环境，像下面这样，就可以构建一个新的 react 单页面应用，非常方便。

npm install -g create-react-app    //用 npm安装 create-react-app

create-react-app my-app              //用 create-react-app 创建自建项目 my-app

cd my-app                                     //进入自建项目 my-app

npm start                                       //npm 启动

2、安装 SASS

但是现在的 create-react-app（react.15.6.1） 去掉了默认支持Sass等预处理器，官方文档说明，有如何配置预处理器，如果我们要使用预处理器时，就需要我们自己来配置，在按着官方文档进行配置时，npm start 是有效果的，但是当我改动 scss 文件时，就会报错。然后就在网上查找了一些相关配置，发现这样也是可以的：

安装依赖

npm install sass-loader node-sass --save-dev

如果长时间安装不上，试试淘宝镜像

可以先下载一下淘宝镜像

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中添加一项：

{

    test:/\.scss$/,

    loaders:['style-loader','css-loader','sass-loader'],

},

像这样：

至此，Sass 就配置好了。

注意，我们只是修改了 webpack.config.dev.js ,如果要在生产环境中生效，需要在webpack.config.prod.js做同样的配置。

3、引入千牛UI测试一下

安装QNUI

QNUI提供了npm包的引入方式，在项目目录下运行

npm install qnui --save

在文件头部引入QNUI

import 'qnui/lib/button/index.scss';

import Button from 'qnui/lib/button'; 

重新npm start 

完成！

如果对你有帮助，请点赞收藏！

参考文章：点此查看