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;
}
複製代碼