欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

create-react-app 16.8最新版配置less以及antd自定义主题

程序员文章站 2024-03-01 10:15:28
...

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

好了,完成。告辞