在create-react-app创建的React项目应用中配置JQ、Sass

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

但是， 去掉了默认支持Sass等预处理器，和默认的JQ库。

添加JQ库

1.安装jq库 npm install --save-dev jquery

2.在入口js 文件中引入 import $ from 'jquery';

添加sass处理文件

1.首先安装依赖：npm install sass-loader node-sass --save-dev

2.找到node_modules/react-scripts/config/webpack.config.dev.js文件和webpack.config.prod.js文件（两个文件都要改）

将module配置项的最后一项配置改成如下

{ loader: require.resolve('file-loader'),

loaders. exclude: [/\.js$/, /\.html$/, /\.json$/,/\.scss$/],

options: { name: 'static/media/[name].[hash:8].[ext]',

},

},

{ test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'], }

3.在入口js 文件中引入：import './test.scss';

4.在package.json中srcipt 引入：build-css ,watch-css