create-react-app 16.8最新版配置less以及antd自定义主题
create-react-app 16.8最新版配置less以及antd自定义主题
今天拉取了create-react-app,本来是准备开个新项目写点新的玩意的,但是当我npm run eject 的时候,我眉头一皱,感觉事情并没有想象的简单,首先,用了yarn的同学,请自觉删除掉node_modules,然后npm install 一下,不然yarn start 一定报错,
终于把项目跑起来了,但是打开config文件夹,发现这熟系的配置文件都不见了,我的dev ,,,我的prod都没有了。只有一个webpack.config.js.怎么办,在线等。。。
再啰嗦要挨打了,现在开始说一下如何配置less
yarn add less less-loader babel-plugin-import -D
yarn add antd
先安装依赖,安装好了以后我们打开config/webpack.config.js。
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
//找到上面这段
+ const lessRegex = /\.less$/;
+ const lessModuleRegex = /\.module\.less$/;
//加入这两句。
现在开始下一步
//在 {test:sassRegex,xxxx}前面加入这一段。
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader',
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader',
),
},
现在来说一下为啥,我们其他的可以不用关注,关注getStyleLoaders() 这个方法,
getStyleLoaders() 这个函数有两个参数,第一个参数是cssOptions 也就是cssloader 的配置选项 ,第二个参数preProcessor 这个就是loader名称。我们不用去关注const loaders = […]发生了啥。只看后面,发现后面就是loaders.push 我们新添加的loader。
我们先来看看我们之前怎么配置的antd 按需加载和主题色
首先是package.json
//位置自己找哈
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": true
}
]
]
},
其次是修改webpack.config.dev.js 和 webpack.config.prod.js 文件,加在post-loader 那个对象后面
{
loader:require.resolve("less-loader"),
options: { javascriptEnabled: true, modifyVars:{ "@primary-color": "#4D7CFF", }}
}
那么新版本怎么处理呢,新版本package.json文件还是按照之前配置:
//注意,有加号的说明是改动的,
- const getStyleLoaders = (cssOptions, preProcessor) => {
+ const getStyleLoaders = (cssOptions, preProcessor,newOptions) => {
options: {
+ ...newOptions,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
然后我们之前配置的less-loader 改为:
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader',
+ { javascriptEnabled: true, modifyVars: { "primary-color": "#ff4c4c", } }
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader',
+ { javascriptEnabled: true, modifyVars: { "@primary-color": "#1890ff", } }
),
},
好了,完成。告辞
上一篇: 无法将函数定义与现有的声明匹配 问题的解决办法 分享
下一篇: iframe无跳转表单提交