create-react-app 建立項目有關 less 的若干問題

在上篇文章使用 Eject 方式在 create-react-app 中使用 Ant Design of React中， 使用 create-react-app 建立了 React 項目，並使用 Eject 方式暴露出了 webpack 的配置，併成功按需引入了 antd。本文主要內容：解決 create-react-app 建立項目後 less 不生效的問題；antd 按需引入 less 源文件，以及遇到的 bezierEasing.less 文件報錯問題；antd 本地字體的配置方法；less 使用 css module 的配置。

直接引入less樣式不生效

建立 test.less，並在 App.js 中引入

.test {
  color: red;
}
複製代碼

// App.js
...
import './test.less'
...
 <div className="test">test</div>
 <Button type="primary">Button</Button>
...
複製代碼

發現 test 的顏色並無生效，由於 create-react-app 沒有內置 less-loader

安裝 less 和 less-loader ，並修改 webpack 配置

$ cnpm i less less-loader --save-dev
複製代碼

修改 webpack 配置 修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件, 增長less文件配置:

// webpack.config.dev.js
...
  {
    test: /\.less$/,
    use: [
      require.resolve('style-loader'),
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
        },
      },
      {
        loader: require.resolve('less-loader') // compiles Less to CSS
      }
    ],
  },
...
複製代碼

重啓項目後，less樣式已經生效

antd 的樣式使用 less 源文件方式引入

在babel-plugin-import 中對 style 有這樣對說明：

["import", { "libraryName": "antd" }] : import js modularly

["import", { "libraryName": "antd", "style": true }] : import js and css modularly (LESS/Sass source files)

["import", { "libraryName": "antd", "style": "css" }] : import js and css modularly (css built files)

修改package.json，將style的值改成true

...
  "babel": {
    "presets": [
      "react-app"
     ]
     ],
    "plugins": [
      ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
    ]
  }
...
複製代碼

重啓以後，編譯錯誤，提示 bezierEasing.less 文件的 .bezierEasingMixin() 方法報錯：

按照報錯提供的 issue 地址查看 ： issues/44

緣由是由於 less v3 以後廢棄了 Enable Inline JavaScript Option ：lesscss.org/usage/#less…

主要有2種解決方式

• 將 less 版本降到 3.0 如下
• less loader 增長配置，開啓 JavaScript ：

// webpack.config.dev.js
...
  {
- loader: require.resolve('less-loader') // compiles Less to CSS
+ loader: require.resolve('less-loader'), // compiles Less to CSS
+ options: {
+ javascriptEnabled: true
+ }
    
  }
複製代碼

從新 npm start，項目能夠正常啓動。

antd使用本地字體 iconfont

2018年9月5日更新，9月開學季， ant design 系列迎來了一系列的重大更新。umi 迎來了 2.0 版本， 隨之而來的是 ant design pro 使用 umi 2.0 構建的 2.0 版本。 今天注意到 ant design 的 3.9.0 版本一個重大的更新是對 Icon 進行了重構， 使用 SVG 代替以前的 css font icon。因此若是使用 ant design 3.9.0 以上的版本， 就不會存在離線找不到字體文件的問題了。若是你使用的 ant design 在 3.9.0 版本如下，能夠參考下文離線使用 iconfont 的方式。

Ant Design 默認的 iconfont 文件託管在 iconfont.cn 並默認使用平臺提供的 alicdn 地址，公網可訪問使用。

因爲 alicdn 對部分域名有訪問限制，或者須要內網環境使用，須要將字體下載到本地

最新的 iconfont 文件能夠到 此連接 下載。

下載後將字體文件放入 public/iconfont/ 路徑下

因爲項目使用的是 create-react-app 建立項目，且antd的樣式使用babel-plugin-import按需加載樣式，因此只能採用 定製主題中的 less-loader 的 modifyVars 配置來覆蓋原來的樣式變量。

具體改動 修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件

// webpack.config.dev.js
...
  {
     loader: require.resolve('less-loader'), // compiles Less to CSS
     options: {
        javascriptEnabled: true，
        modifyVars: {
          "icon-url": "'/public/iconfont/iconfont'"
        }
     }
  }
複製代碼

重啓項目，成功引入了本地字體

須要注意的是webpack.config-prod.js文件中的icon-url路徑須要將public替換爲生產環境項目文件路徑，打包以後public中的文件和文件夾直接複製到bulid路徑下。使用相對路徑會報錯沒法編譯，這點不知道有沒有更好的處理方式，但願讀者大神們提供更好的方式。

// webpack.config-prod.js
...
  {
     loader: require.resolve('less-loader'), // compiles Less to CSS
     options: {
        javascriptEnabled: true，
        modifyVars: {
          "icon-url": "'/your-project-name/iconfont/iconfont'"
        }
     }
  }
複製代碼

css module 形式引入less

增長css-loader的配置

{
            test: /\.less$/,
            // exclude: [/node_modules/],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                   importLoaders: 1,
+ modules: true
                },
              },
              {
                loader: require.resolve('less-loader'), // compiles Less to CSS
                options: {
                  javascriptEnabled: true,
                  modifyVars: {
                    "icon-url": "'/public/iconfont/iconfont'"
                  }
                }
              }
            ],
          },
複製代碼

修改App.js，使用css module方式引入

- import './test.less'
+ import styles from './test.less'

    class App extends Component {
      render() {
        return (
          <div className="App">
- <div className="test">test</div>
+ <div className={styles.test}>test</div>
            <Button type="primary">Button</Button>
          </div>
        );
      }
    }
複製代碼

重啓項目,css module引入的test樣式生效了，可是antd的按鈕樣式失效了

須要修改 webpack.config.dev.js，只對src中的less文件開啓css module，這裏寫法有點麻煩，應該有更好的方式。

// webpack.config.dev.js
...
          {
            test: /\.less$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1
                },
              },
              {
                loader: require.resolve('less-loader'), // compiles Less to CSS
                options: {
                  javascriptEnabled: true,
                  modifyVars: {
                    "icon-url": "'/public/iconfont/iconfont'"
                  }
                }
              }
            ],
          },
          {
            test: /\.less$/,
            include: [/src/],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true
                },
              }
            ],
          },
...
複製代碼

2018-08-02更新，評論區有兄弟留言說從新npm install後，css module引入的樣式失效了，今天測試了一下確實有這個問題，試着改了上面的對less文件處理的loader順序能夠解決這個問題，可是原理不是很清楚，還請了解原理的兄弟幫忙指點，多謝

// webpack.config.dev.js
...
          {
            test: /\.less$/,
            include: [/src/],
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true
                },
              }
            ],
          },
          {
            test: /\.less$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1
                },
              },
              {
                loader: require.resolve('less-loader'), // compiles Less to CSS
                options: {
                  javascriptEnabled: true,
                  modifyVars: {
                    "icon-url": "'/public/iconfont/iconfont'"
                  }
                }
              }
            ],
          },
...
複製代碼

總結

本文在eject的create-react-app的項目基礎上，按需引入了antd，遇到了有關less的若干問題：解決了less文件不生效的問題，內網環境使用本地iconfont的配置方式，css module的配置方式。本文還有一些配置方式不是最優的方式，但願各位可以給出更好的方案。

最近在起步 React，準備記錄如下本身的學習和踩坑過程。下一篇文章應該是dva的使用。

參考資料

• github.com/ant-design/…
• Antd定製主題
• create-react-app項目添加less配置
• 如何在react中使用antd+less+css modules
• [譯] react-css-modules