react学习系列1 修改create-react-app配置支持stylus
注:由于前端更新非常快,写这篇文章时 create-react-app 使用的版本是1.4.1 最新的使用流程请参照官方文档。
create-react-app 是facebook推出的快速创建react项目的命令行工具。
他和 vue-cli 类似。开箱即用,不用改一行配置就可以开发出针对开发和生产环境的react项目。
比如针对开发环境有eslint语法检测,热重载,带有proxy server等功能。
这些东西大多要归功于webpack的功劳。
默认情况下webpack配置文件不会暴露出来,这不满足我当前的需求,比如这里我喜欢用 stylus(一个类似less,sass的样式预处理器)。stylus 和 sass 类似,支持变量,mixin,函数等功能,而且连括号,分号都不用写。用缩进区分。
create-react-app 支持执行 npm run reject
将相关配置文件释放到根目录下。注意这里是不可逆操作。
官网的 readme 中有怎么添加 sass 和 less 的教程 没有讲如何添加 stylus 支持,其实这也难不倒咱。
具体步骤如下:
- 项目根目录执行
npm run reject
,会发现多出来个 config 目录,里面的各个配置文件都带有详尽的注释 - 安装 stylus 相关依赖,执行
npm install stylus stylus-loader --save-dev
或yarn add stylus stylus-loader
- 打开
config\webpack.config.dev.js
我们让webpack支持解析 styl 格式的文件
在 module->rules->oneOf 组下面添加
{test: /\.styl$/,use: [require.resolve('style-loader'),require.resolve('css-loader'),require.resolve('stylus-loader')]},
![](https://yqfile.alicdn.com/img_fbdbab367fb9338d13fae753fedffd87.png)
- 打开
webpack.config.prod.js
添加如下(这是我参考下面的针对的css配置,需要更进一步测试)这是因为prod环境下,所有的css都被 ExtractTextPlugin 插件提取到同一个样式文件中,开发环境则是动态的创建style标签并插入到html的header中。
{test: /\.styl$/,loader: ExtractTextPlugin.extract(Object.assign({fallback: require.resolve('style-loader'),use: [{loader: require.resolve('css-loader'),options: {importLoaders: 1,minimize: true,sourceMap: shouldUseSourceMap,},},{loader: require.resolve('stylus-loader'),}],},extractTextPluginOptions)),// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.},
- 新建目录
src\static\styl
并创建 base.styl
内容如下:
bodymargin: 0padding: 0background-color: #f1f1f1*margin: 0padding: 0box-sizing: border-boxfont-family: "微软雅黑","Times New Roman",Georgia,Serif
atext-decoration: none
- 打开
src\index.js
,添加import './static/styl/index.styl';
- 最后重新执行
npm run start
或yarn start
就能看到样式变化了。
参考:
https://cn.vuejs.org/v2/guide/comparison.html#React
react学习系列1 修改create-react-app配置支持stylus相关推荐
- react学习系列1 修改create-react-app配置支持stylus 1
注:由于前端更新非常快,写这篇文章时 create-react-app 使用的版本是1.4.1 最新的使用流程请参照官方文档. create-react-app 是facebook推出的快速创建rea ...
- react学习系列之states与props
state React 把组件看成是一个状态机(State Machines).通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致. React 里,只需更新组件的 state, ...
- react学习系列3 使用koa-router模拟后台接口
当用create-react-app创建好项目,启动后会自动打开 localhost:3000. 我们希望当访问 localhost:3000/api/todo 会向后台发起一个请求,拿到我们想要的 ...
- react学习系列(二)
JSX 语法练习 在jsx语法中,需要书写js代码的时候,请先加上{ } 再书写js语法 import React, { Component } from 'react'let name = &quo ...
- React学习系列十propTypes defaultProps
都是定义在子组件里面的 defaultProps 父子组件传值中,如果父组件调用子组件的时候不给子组件传值,则可以在defaultProps中定义默认值 propTypes 验证父组件传值的类型合法性 ...
- react学习系列之ajax
React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据库可以将数据存储在 state 中,再用 this.setState 方法重新渲染 U ...
- Spring Cloud学习系列第六篇【分布式配置中心】
今天来学习如何使用Spring Cloud Config在微服务中搭建一个分布式配置中心,使用了分布式配置中心之后,我们就可以通过它来管理应用资源与业务资源配置内容.Spring Cloud Conf ...
- 深度强化学习系列: 多巴胺(Dopamine)环境配置和实例分析
Paper: Dopamine–a research framework for deep reinforcement Learning Github: https://github.com/goog ...
- STM32 HAL库学习系列第13篇---串口重定向配置--printf
我的首发平台是公众号[CodeAllen],学习交流QQ群:736386324,本文版权归作者所有,转载请注明出处 发送函数重定向 之后就可以使用输入输出函数 /******************* ...
最新文章
- 并查集(浓缩的精华模版!!!!)
- 数组元素的修改会影响到转换过来的结合_数组长度属性背后有什么魔力?
- rhel7+apache+c cgi+动态域名实现web访问
- linux 信号发生器,用STM32实现函数信号发生器
- QT解析嵌套JSON表达式
- Map集合框架的练习
- 增强光学系统设计 | Zemax 全新 22.2 版本产品现已发布!
- SWMM面板基础认识
- Java对接谷歌邮箱-代码及其谷歌邮箱账号配置
- EXCEL中的定位条件(含快速删除空行,定位图片、文本框等对象)
- 红米note3 Android N,骁龙650的力量 红米Note3全网通版评测
- 西米推荐-FileYee:可能是最简单安全的数据文件备份软件
- 动态调试pr_debug
- Microbit蓝芽配对
- clip python_python中numpy模块下的np.clip()的用法
- 说一个道一个.....
- 生物信息学所需的计算机知识,生物信息学专业计算机课程的探讨
- 数据库学习笔记(SQL server语句)
- 手机录音 怎么单声道_手机音量已经调到很大,听起来还是很小怎么办?原来问题出在这里...
- python基于朴素贝叶斯模型的预测概率和标签信息可视化ROC曲线