在create-react-app創建的React項目應用中配置JQ、Sass

使用 create-react-app 配置 react 開發環境，像下面這樣，就可以構建一個新的 react 單頁面應用，非常方便。

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

但是， 去掉了默認支持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

"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"

},