注：由于前端更新非常快，寫這篇文章時 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')]}, image.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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。