create-react-app 项目名称(项目失败,ant 的样式出不来)

项目技术栈

react + redux + react-route + webpack+ axios + less + antd

使用create-react-app 创建的项目默认不支持less,以下增加less配置的步骤

暴露配置文件
create-react-app生成的项目文,看不到webpack相关的配置文件,需要先暴露出来,使用如下命令即可:

npm run eject

安装less-loader 和 less

npm install less-loader less --save-dev

yarn less-loader less//这个执行不行

此时没有webpack.config.js文件,然后执行npm run eject暴露webpack.config.js文件,在config文件夹里(此操作不可逆)

运行后如果无法启动,执行 npm install

老版修改方式  
修改webpack配置
修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件

改动1:

/\.css$/ 改为 /\.(css|less)$/,, 修改后如下:

exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.(css|less)$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
改动2: test: /\.css$/ 改为 /\.(css|less)$/

新版修改方式

config文件此目录 webpack.config.js

1

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

改为

// style files regexes
const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

2

  // common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
{

增加代码

  const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
},
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
,
{
loader: require.resolve('less-loader'),
options: cssOptions,
},

先验证less是否可以

import './app.less';
不然刷新不行,就重启

如果antd引入的组件还是不展示样式

在引入的页面添加

import 'antd/dist/antd.css';

刷新就能看到样式了

如果想实现按需加载antd,需要引入

yarn add babel-plugin-import

修改 package.json,添加下面代码就可以去掉 import 'antd/dist/antd.css'; 了

  "babel": {
"presets": [
"react-app"
],
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
]
}

在或者接着添加 customize-cra

yarn add customize-cra

创建文件 config-overrides.js

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);

然后重启运行

yarn add antd

yarn add axios

yarn add react-redux

yarn add react-router

yarn add react-router-dom

yarn add redux-immutable

yarn add react-router-redux

yarn add redux

yarn add redux-actions

yarn add redux-mock-store

yarn add redux-thunk

yarn add immutable

yarn add echarts

yarn add md5

yarn add rc-queue-anim

yarn add rc-tween-one

yarn add prop-types

如果会用的日期要再引入一个模块,用来格式化日期的

yarn add moment

如果有跨域请求

yarn add  fetch-jsonp

import { Select } from 'antd';
import jsonp from 'fetch-jsonp';
import querystring from 'querystring'; const { Option } = Select; let timeout;
let currentValue; function fetch(value, callback) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
currentValue = value; function fake() {
const str = querystring.encode({
code: 'utf-8',
q: value,
});
//这里
jsonp(`https://suggest.taobao.com/sug?${str}`)
.then(response => response.json())
.then(d => {
if (currentValue === value) {
const { result } = d;
const data = [];
result.forEach(r => {
data.push({
value: r[0],
text: r[0],
});
});
callback(data);
}
});
} timeout = setTimeout(fake, 300);
} class SearchInput extends React.Component {
state = {
data: [],
value: undefined,
}; handleSearch = value => {
fetch(value, data => this.setState({ data }));
}; handleChange = value => {
this.setState({ value });
}; render() {
const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
return (
<Select
showSearch
value={this.state.value}
placeholder={this.props.placeholder}
style={this.props.style}
defaultActiveFirstOption={false}
showArrow={false}
filterOption={false}
onSearch={this.handleSearch}
onChange={this.handleChange}
notFoundContent={null}
>
{options}
</Select>
);
}
} ReactDOM.render(<SearchInput placeholder="input search text" style={{ width: 200 }} />, mountNode);

react 后台(一) react + redux + react-route + webpack+ axios + antd + less的更多相关文章

  1. react 后台(一)react + redux + react-route + webpack+ axios + antd+styled-components(替代less)

    create-react-app my-admin 项目技术栈 react + redux + react-route + webpack+ axios + antd+styled-component ...

  2. Redux React & Online Video Tutorials

    Redux React & Online Video Tutorials https://scrimba.com/@xgqfrms https://scrimba.com/c/cEwvKNud ...

  3. Flux --> Redux --> Redux React 入门

    本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...

  4. Flux --> Redux --> Redux React 基础实例教程

    本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...

  5. Flux --> Redux --> Redux React 入门 基础实例使用

    本文的目的很简单,介绍Redux相关概念用法 及其在React项目中的基本使用 假设你会一些ES6.会一些React.有看过Redux相关的文章,这篇入门小文应该能帮助你理一下相关的知识 一般来说,推 ...

  6. react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)

    react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...

  7. 【前端】react学习阶段总结,学习react、react-router与redux的这些事儿

    前言 借用阮一峰的一句话:真正学会 React 是一个漫长的过程. 这句话在我接触react深入以后,更有感触了.整个react体系都是全新的,最初做简单的应用,仅仅使用react-tools打包js ...

  8. 在 React Native 中使用 Redux 架构

    前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...

  9. 在react项目中使用redux or mobx?

    主要比较参数: 库体积,打包项目体积 开发体验 性能对比 在对比参数前首先分析一下redux和mobx的设计模式,redux和mobx都没有使用传统的mvc/mvvm形式,而且他们使用flux结构也略 ...

随机推荐

  1. 1204: 移位运算(C)

    一.题目 http://acm.wust.edu.cn/problem.php?id=1204&soj=0 二.分析 无符号短整数关键字为:unsigned short: 无符号短整数长为2字 ...

  2. UPUPW Apache5.5系列本地开发环境配置

    UPUPW Apache5.5系列 1. 在官网下载 Apache5.5系列,选择云端下载. 官网地址: http://www.upupw.net/aphp55/n110.html 2. 下载后,将压 ...

  3. Ubuntu16.04 换源(或者404 Not Found问题)

    当执行sudo apt-get update或者sudo apt-get install命令时,出现以下两个问题: “apt-get 404 Not Found Package Repository ...

  4. 阿里数据迁移DTS【otter】和阿里巴巴mysql数据库binlog的增量订阅&消费组件 【canal】

    [链接]alibaba/otterhttps://github.com/alibaba/otter https://github.com/alibaba/canal

  5. QCache<key,T> 就定义了一个缓存,其类似于map,好处是QCache自动获得被插入对象的所有权,控制所有对象的costs总和(自动管理对象的生存时间。正经数据是不会用到它的,辅助控制才有可能用到它)

    在软件开发中,我们经常需要在内存中存储一些临时数据用于后续相关计算.我们一般把这些数据存储到某个数组里,或者STL中的某个合适的容器中.其实,在Qt中直接为我们提供了一个QCache类专用于这种需求. ...

  6. [Vue]导航守卫:全局的、单个路由独享的、组件级的

    正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的 ...

  7. spring.factories配置文件的工厂模式

    在springboot的各个依赖包下,我们经常看到META-INF/spring.factories这个文件.spring.factories文件的内容基本上都是这样的格式: # Initialize ...

  8. 基于【 Docker】五 || maven私服环境搭建

    1.Maven  Nexus私服的原理 为了节省带宽和时间,在局域网内架设一个私有的仓库服务器,用其代理所有外部的远程仓库.当本地Maven项目需要下载构件时,先去私服请求,如果私服没有,则再去远程仓 ...

  9. oracle学习笔记:update一整列 关联更新

    普通的 update 都是根据条件来对部分列的内容进行修改,用法如下: update temp_cwh_table set name = 'xxx' where id = 1; 假设现在有2张表:A. ...

  10. Python 多进程拷贝文件夹案例

    import os import multiprocessing def copy_file(q, file_name, old_folder_name, new_folder_name): &quo ...