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

react

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

npm install -g create-react-app

create-react-app my-app

cd my-app

npm start

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

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

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

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

"scripts": {

"build-css": "node-sass-chokidar src/ -o src/",

"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test --env=jsdom",

"eject": "react-scripts eject"