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", } }
       ),
                },

好了，完成。告辞