阅读 24

7.React 使用less等预处理器配置

如何使用less,stylus等第三方预处理器

一、暴露webpack,安装less\less-loader依赖

在create-react-app创建的项目下是不支持less的,我们要使用less就需要在相关配置文件中配置。

关于less的需要找到两个文件webpack.config.dev.js和webpack.config.prod.js

可是,create-react-app创建的项目是看不到webpack相关的配置文件,所以需要先暴露出来,使用以下命令:

npm run eject

安装less相关依赖

yarn add less less-loader -D

二、修改webpack文件配置

修改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$/

// 第二处是增加 `less-loader`的配置,仿照sass来配置即可
  module: {
    ...
    
            {test: sassRegex...},
            {test: sassModuleRegex..},
            +++
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            }
            +++
  }
复制代码

三、如需配置antd的按需加载

修改package.json:添加antd库的样式

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ]
    ]
  }
复制代码

四、如果需要定制antd的主题则需要修改webpack.config.js

找到约71行的getStyleLoaders方法,在约112行的判断追加配置

 if (preProcessor) {
      loaders.push(
        {
          loader: require.resolve('resolve-url-loader'),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
        },
        {
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: true,
            // modifyVars: {
            //   'primary-color': '#1DA57A',
            //   'link-color': '#1DA57A',
            //   'border-radius-base': '2px',
            //   // or
            //   //'hack': `true; @import "your-less-file-path.less";`, // Override with less file
            // },
            // 上面是配置自定义主题,下面为开启js支持
            javascriptEnabled: true,
          },
        }
      );
    }
复制代码

最后这一步要修改package.json中的配置

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": true // 修改为true则会加载less
        }
      ]
    ]
  }
复制代码

相关连接

最近在学习react开发,整理几篇笔记方便自己查询使用,下面是连接地址

1.React 之 react-transition-group

2.React之 redux、react-redux、redux-thunk

3.React 之 immutable 和 redux-immutable

4.React 之react-router-dom

5.React 之 react-loadable

6.React 基础记录

7.React 使用less等预处理器配置

关注下面的标签,发现更多相似文章
评论