[轉] 使用babel-plugin-react-css-modules簡化CSS Modules的使用

在咱們的產品中，均使用CSS Modules來做爲樣式解決方案，大體的代碼是這樣的：

import React from 'react'; import styles from './table.css'; export default class Table extends React.Component { render () { return <div className={styles.table}> <div className={styles.row}> <div className={styles.cell}>A0</div> <div className={styles.cell}>B0</div> </div> </div>; } } 

但這裏顯然存在一些細節上的麻煩：

1. 引入樣式時額外增長了一個styles變量
2. 須要不斷寫styles.xxx，重複代碼

babel-plugin-react-css-modules插件能夠必定程度上緩解這些問題，使代碼變爲：

import React from 'react'; import './table.css'; export default class Table extends React.Component { render () { return <div styleName='table'> <div styleName='row'> <div styleName='cell'>A0</div> <div styleName='cell'>B0</div> </div> </div>; } } 

難點

1. 咱們的產品使用LESS而非原生的CSS來編寫樣式
2. 爲了生成的類名更漂亮，咱們使用CSS Modules用了一個自定義的getLocalIdent實現
3. 與webpack的整合可能存在一些難點

解決方案

安裝依賴

npm i --save babel-plugin-react-css-modules
npm i --save-dev postcss-less

須要注意的是，babel-plugin-react-css-modules有一個運行時依賴，因此用--save安裝比較好。而postcss-less則用於解析LESS的語法

調整構建配置

由於有一個自定義的生成類名的函數，因此原有的.babelrc的JSON格式已經不夠了（沒法表達函數），所以咱們要把.babelrc的配置移到babel-loader的options裏去

在完成移動後，再向其中添加babel-plugin-react-css-modules這一插件，在這個過程當中將生成類名的函數抽象出來：

const generateScopedName = (name, filename) => { const hash = hasha(filename + name, {algorithm: 'md5'}); const basename = path.basename(filename, '.less'); return `${dashCase(basename)}-${name}-${hash.slice(0, 5)}`; }; exports.babel = { loader: 'babel-loader', options: { cacheDirectory: true, presets: [ // ...預置集 ], plugins: [ // ...其它插件 [ 'react-css-modules', { context: path.join(__dirname, '..'), exclude: 'node_modules', filetypes: { '.less': { syntax: 'postcss-less' } }, generateScopedName: generateScopedName } ] ] } }; 

以上文件爲webpack/loaders.js，相關的配置基本不用修改，原樣使用就行。若是這些代碼的位置不一樣，將其中的context配置修改一下，對應至項目根目錄就行。

而後調整一下CSS Modules相關的loader的配置，複用generateScopedName函數：

exports.cssModules = { loader: 'css-loader', options: { sourceMap: development, modules: true, importLoaders: true, camelCase: 'dashes', getLocalIdent({resourcePath}, localIdentName, localName) { return generateScopedName(localName, resourcePath); } } }; 

修改一些源碼

須要特別注意：全部從.js中引用.less的代碼，都不能夠依賴webpack的resolve.modules配置，只能寫相對路徑了。即原來寫import 'common/less/global.less'要改爲import './common/less/global.less'

隨後按着喜愛將已經用了className的地方慢慢改爲styleName就行。