React 配置 (.modules).less 环境

安装 less 依赖

$ yarn add less less-loader -D 

暴露 react 的 webpack.config.js 文件

$ yarn eject

编辑 config/webpack.config.js 文件

const lessRegex = /\.less$/
const lessModuleRegex = /\.module\.less$/

module.exports = function (webpackEnv) {
  ...
  // 搜索 oneOf 关键字 在里面添加 less 依赖配置
  oneOf: [
 	...
	{
      test: lessRegex,
      exclude: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 3,
          sourceMap: isEnvProduction
          ? shouldUseSourceMap
          : isEnvDevelopment,
        },
        'less-loader'
      ),
      sideEffects: true,
    },
    {
      test: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 3,
          sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
          modules: {
            getLocalIdent: getCSSModuleLocalIdent,
          },
        },
        'less-loader'
     ),
   },
 ],
 ...
}

使用 [filename].modules.less 文件直接使用即可，webpack 默认支持，无需安装插件

App.module.less

body {
  background: #000;
}

.App {
  .youwne {
    color: #fff;
  }
  .youw-ne {
    color: #fff;
  }
}

App.js

import styles from './App.module.less'

function App() {
  return (
    <div className={styles.App}>
      <div className={styles.youwne}>youwne</div>
      <div className={styles['youw-ne']}>youw-ne</div>
    </div>
  );
}

export default App;

截图

如果觉得样式使用 styles['xxx']太累了，可以使用 :global 关键字

App.module.less

body {
  background: #000;
}

.App {
  :global {
    .youwne {
      color: #fff;
    }
    
    .youn-ne {
      color: #fff;
    }
  }
}

App.js

import styles from './App.module.less'

function App() {
  return (
    <div className={styles.App}>
      <div className='youwne'>youwne</div>
      <div className='youn-ne'>youn-ne</div>
    </div>
  );
}

export default App;

截图