在Create React App创建的React项目中使用less

前置条件

Node的版本不能低于 4.0。官方建议使用 Node6+ 和 npm3+。 安装create-react-app的方式也非常简单，可以直接使用npm命令进行全局安装。

npm install -g create-react-app

创建一个新app

create-react-app my-app
cd my-app/

在开发模式下运行app。

npm start

在package.json文件里更改打开的端口号

{
  "name": "smart-customer-service",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^3.5.3",
    "axios": "^0.18.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-loadable": "^5.4.0",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.1.4"
  },
  "scripts": {
    <!--更改项目本地打开的端口号-->
    "start": "set PORT=3006 && react-app-rewired start",  
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  },
  "devDependencies": {
    "babel-plugin-import": "^1.7.0",
    "react-app-rewire-less": "^2.1.1",
    "react-app-rewired": "^1.5.2"
  },
  <!--webpack代理，可以跨域-->
  "proxy": "http://10.60.34.7:8080"
}

安装 less & less-loader

yarn add less less-loader

方法一：

暴露 webpack 配置文件

yarn eject

找到config文件夹下的webpack.config.js

在配置文件中做了两处修改

第一处是找到 cssRegex和cssModuleRegex 在他们的下面新建lessRegex和lessModuleRegex变量

第二处是增加 less-loader的配置

具体修改如下

//第一块大概在38行左右
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
//第二块大概在318行左右
 //配置less
{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
},
{
    test: lessModuleRegex,
    use: getStyleLoaders(
        {
          importLoaders: 2,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
    ),
 },

如出现报错

yarn add @babel/plugin-transform-react-jsx-source

方法二：

引入 react-app-rewired 并修改 package.json 里的启动配置

$ yarn add react-app-rewired customize-cra

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

在项目根目录创建一个 config-overrides.js 用于修改默认配置

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
   modifyVars: { '@primary-color': '#1DA57A' },
  }),
);

或

const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');
const rewireSvgReactLoader = require('react-app-rewire-svg-react-loader');

module.exports = function override(config, env) {
  config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],config);
  config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
  config = rewireSvgReactLoader(config, env);
  config = rewireLess.withLoaderOptions({
    javascriptEnabled: true, //修复 less3 导致的 webpack 构建错误
    // antd 全局配置的样式
    modifyVars: {
      'body-background':'#E3E7EE',
      'layout-header-height':'70px',
      'table-header-bg':'#F7FAFC',
      'border-radius-base':'0',
      '@btn-default-bg': '#6995FF',
      '@btn-default-color': '#fff',
    }
  })(config, env);
  return config;
}