WhatAKitty Daily

A Programmer's Daily Record

React-script + Antd + CSS Module(非eject)

WhatAKitty   阅读次数loading...

缘由

由于项目需要,需要构建一个ReactJS的应用,恰巧看见了react-script这个开源项目,将一些webpack的配置都隐藏了,整体项目看起来更清晰明了。

所以,打算采用如下的技术栈:

  • React 16.0.0
  • React-script
  • React-app-rewired(用于扩展react-script的配置)
  • Antd

但是在构建过程中,发现并没有现成app-rewired的模块提供有less-css-module的功能。在这过程中,查阅了许多资料,最后在@andriijas的帮助下成功达成了目的。

成果

第一步首先需要创建一个react-app-rewire-less-module文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
const cloneDeep = require('lodash.clonedeep')

const ruleChildren = (loader) => loader.use || loader.oneOf || Array.isArray(loader.loader) && loader.loader || []

const findIndexAndRules = (rulesSource, ruleMatcher) => {
let result = undefined
const rules = Array.isArray(rulesSource) ? rulesSource : ruleChildren(rulesSource)
rules.some((rule, index) => result = ruleMatcher(rule) ? {index, rules} : findIndexAndRules(ruleChildren(rule), ruleMatcher))
return result
}

const findRule = (rulesSource, ruleMatcher) => {
const {index, rules} = findIndexAndRules(rulesSource, ruleMatcher)
return rules[index]
}

const cssRuleMatcher = (rule) => rule.test && String(rule.test) === String(/\.css$/)

const createLoaderMatcher = (loader) => (rule) => rule.loader && rule.loader.indexOf(`/${loader}/`) !== -1
const cssLoaderMatcher = createLoaderMatcher('css-loader')
const postcssLoaderMatcher = createLoaderMatcher('postcss-loader')
const fileLoaderMatcher = createLoaderMatcher('file-loader')

const addAfterRule = (rulesSource, ruleMatcher, value) => {
const {index, rules} = findIndexAndRules(rulesSource, ruleMatcher)
rules.splice(index + 1, 0, value)
}

const addBeforeRule = (rulesSource, ruleMatcher, value) => {
const {index, rules} = findIndexAndRules(rulesSource, ruleMatcher)
rules.splice(index, 0, value)
}

module.exports = function (config, env, lessOptions = {}) {
const cssRule = findRule(config.module.rules, cssRuleMatcher)
const lessRule = cloneDeep(cssRule)
const cssModulesRule = cloneDeep(cssRule)

cssRule.exclude = /\.module\.css$/

const cssModulesRuleCssLoader = findRule(cssModulesRule, cssLoaderMatcher)
cssModulesRuleCssLoader.options = Object.assign({modules: true, localIdentName: '[local]___[hash:base64:5]'}, cssModulesRuleCssLoader.options)
addBeforeRule(config.module.rules, fileLoaderMatcher, cssModulesRule)

lessRule.test = /\.less$/
lessRule.exclude = /\.module\.less$/
// 将lessOptions传入,以重写antd的主题
addAfterRule(lessRule, postcssLoaderMatcher, {
'loader': require.resolve('less-loader'),
'options': lessOptions,
})
addBeforeRule(config.module.rules, fileLoaderMatcher, lessRule)

const lessModulesRule = cloneDeep(cssModulesRule)
lessModulesRule.test = /\.module\.less$/

addAfterRule(lessModulesRule, postcssLoaderMatcher, require.resolve('less-loader'))
addBeforeRule(config.module.rules, fileLoaderMatcher, lessModulesRule)

return config
}

第二步,在config-overrides.js文件内引入antd需要的相关资源,以及配置CSS Module

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const path = require('path');
const cloneDeep = require('lodash.clonedeep')
const { compose, getLoader, injectBabelPlugin } = require('react-app-rewired');
const rewireLessModule = require('./react-app-rewire-less-module');

module.exports = function override(config, env) {
// 使得`@`可用
config = injectBabelPlugin('transform-decorators-legacy', config);
// 引入`antd` UI, 并且以less的形式引入
config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);

// 启用css模块化
config = rewireLessModule(config, env, {
modifyVars: {
// 需要覆盖的antd主题变量
'@primary-color': '#1DA57A',
'@link-color': '#1DA57A',
'@border-radius-base': '2px',
'@font-size-base': '14px',
'@line-height-base': '1.2',
'@card-actions-background': '#f5f8fa',
},
});

return config;
};

第三步:

在使用模块化的时候,需要注意:模块化文件必须是*.module.less的形式

结束语

以上配置完成后,就可以开始模块化开发了。

这里有原内容链接

2017年11月04日更新

@andriijas发布了一个npm组件,可以直接使用:

1
yarn add --dev andriijas/react-app-rewire-less-modules

Github仓库地址:
https://github.com/andriijas/react-app-rewire-less-modules

具体用法可以查看Github仓库内的README文档