在create-react-app创建的React项目应用中配置JQ、Sass
2018-02-26 17:47
956 查看
使用 create-react-app 配置 react 开发环境,像下面这样,就可以构建一个新的 react 单页面应用,非常方便。
但是, 去掉了默认支持Sass等预处理器,和默认的JQ库。
2.在入口js 文件中引入 import $ from 'jquery';
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"
},
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 jquery2.在入口js 文件中引入 import $ from 'jquery';
添加sass处理文件
1.首先安装依赖:npm install sass-loader node-sass --save-dev2.找到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"
},
相关文章推荐
- 在create-react-app创建的项目下允许函数绑定运算符
- 使用create-reate-app创建的项目中代理的配置
- react---学习笔记:使用create-react-app快速构建开发环境并创建项目
- create-react-app脚手架中配置sass
- 以create-react-app为基础创建项目
- 使用create-react-app或者antd创建一个React项目
- Create-react-app+Antd+Less 在项目yarn eject 的情况下进行配置
- 在基于 create-react-app 的React项目中进行代码分片、按需加载(code splitting)/ 免webpack配置
- 使用create-react-app创建项目
- create-react-app创建react项目,使用axios跨域
- 利用 Create React Native App 快速创建 React Native 应用
- create-react-app 创建项目失败
- create-react-app如何创建react项目?
- Create-React-App创建React项目
- create-react-app创建react项目失败!
- Create React App快速创建React项目
- Create-React-App项目外使用它的eslint配置
- 利用 Create React Native App 快速创建 React Native 应用
- create-react-app项目添加less配置
- create-react-app 在run eject后对antd和sass的配置