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 支援，其實這也難不倒咱。

具體步驟如下：

1. 項目根目錄執行

   npm run reject

   ，會發現多出來個 config 目錄，裡面的各個配置檔案都帶有詳盡的注釋
2. 安裝 stylus 相關依賴，執行

   npm install stylus stylus-loader --save-dev

   或

   yarn add stylus stylus-loader

3. 打開

   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

1. 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`.
            },
           

1. 建立目錄

   src\static\styl

   并建立 base.styl

   内容如下：

body
  margin: 0
  padding: 0
  background-color: #f1f1f1
  *
    margin: 0
    padding: 0
    box-sizing: border-box
    font-family: "微軟雅黑","Times New Roman",Georgia,Serif
a
  text-decoration: none
           

1. src\index.js

   ，添加

   import './static/styl/index.styl';

2. 最後重新執行

   npm run start

   yarn start

   就能看到樣式變化了。

參考：

https://cn.vuejs.org/v2/guide/comparison.html#React