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. Django入门(上)

    一.Web应用程序 1.web应用程序介绍 Web应用程序是一种可以通过Web访问的应用程序,程序的最大好处是用户很容易访问应用程序,用户只需要有浏览器即可,不需要再安装其他软件. 应用程序有两种模式 ...

  2. shell习题第25题:判断是否开启web服务

    [题目要求] 写一个脚本判断我的linux服务器是否开启web服务?监听80端口 [核心要点] netstat -lntp | grep '80' [脚本] #!/bin/bash n=`netsta ...

  3. 监听lsnrctl status查询状态报错linux error 111:connection refused

    报错现象 今天给客户一个单实例环境配置监听,创建正常,查询状态异常报错 tns tns tns linux error :connection refused 匹配MOS Starting TNS L ...

  4. 设置阿里云镜像仓库并安装Docker

    echo "设置阿里云镜像仓库" mkdir /etc/yum.repos.d/bak && mv /etc/yum.repos.d/*.repo /etc/yum ...

  5. (一)XML基础(1)

    一.什么是XML? XML是指可扩展标记语言(eXtensible MarkupLanguage),它是一种标记语言.它被设计的宗旨是描述数据(XML),而非显示数据(HTML). 目前遵循的是W3C ...

  6. Java MergeSort

    Java MergeSort /** * <html> * <body> * <P> Copyright 1994-2018 JasonInternational ...

  7. iis7 运行多个https,433端口监听多个htps 站点

    默认情况一个服务器的IIS只能绑定一个HTTPS也就是443端口,现在有需要一个服务器 iis 433 端口 绑定多个 申请到证书后(不是必须要通配符的证书),添加多个https站点,先绑定别的端口 ...

  8. 转:让PIP源使用国内镜像,提升下载速度和安装成功率

    转载,自己记录使用,原文http://www.cnblogs.com/microman/p/6107879.html 对于Python开发用户来讲,PIP安装软件包是家常便饭.但国外的源下载速度实在太 ...

  9. java计算接口调用时间

    方法一: LocalDateTime beginTime = LocalDateTime.now(); Long opetime = Duration.between(between,LocalDat ...

  10. Orion (system-on-a-chip)

      From Wikipedia: Orion is a system-on-a-chip manufactured by Marvell Technology Group and used in n ...