react17修改全局webpack配置并增加全局less变量

配置步骤：

• • 引入react-app-rewired插件
    react-app-rewired的作用就是在不eject的情况下,覆盖create-react-app的配置
  • 安装customize-cra
    npm install react-app-rewired customize-cra --save-dev
  • 安装style-resources-loader
npm install style-resources-loader
  • 修改 package.json 里的启动配置
  • npm install less less-loader --dev

/* 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 --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

 

• 根目录创建config-overrides.js 并配置修改

 

const { override, addWebpackAlias, addLessLoader } = require('customize-cra')
const path = require('path')

// module.exports = function override(config, env) {
//   // do stuff with the webpack config...
//   return config;
// };

module.exports = override(
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
      localIdentName: '[local]--[hash:base64:5]'
    }
  }),
  //配置路径别名
  addWebpackAlias({
    ['assets']: path.resolve(__dirname, './src/assets'),
    ['images']: path.resolve(__dirname, './src/assets/images'),
    ['libs']: path.resolve(__dirname, './src/libs'),
    ['components']: path.resolve(__dirname, './src/components'),
  }),
  (config) => {
    //修改、添加loader 配置 :
    // 所有的loaders规则是在config.module.rules(数组)的第二项
    // 即：config.module.rules[2].oneof  (如果不是，具体可以打印 一下是第几项目)
    // 修改 less 配置 ，规则 loader 在第8项( ***此处根据实际项目打印填写，不一定是第7项*** )
    const loaders = config.module.rules.find(rule => Array.isArray(rule.oneOf)).oneOf;
    // console.log(loaders[8])
    loaders[8].use.push({
        loader: 'style-resources-loader',
        options: {
            patterns: path.resolve(__dirname, './src/assets/css/variable.less')//全局引入公共的scss 文件
        }
    })
    return config
}
)

 

• variable.less,需要添加全局样式变量，直接在这个文件添加

• @primary-color: #004080;
  @bg-gray-color: #F4F4F4;

   

若出现less问题，请注意less版本问题

我使用的是

"less": "^3.0.4",
    "less-loader": "^5.0.0",