React 配置 (.modules).less 环境

安装

less

依赖

$ yarn add less less-loader -D 
           

暴露

react

的

webpack.config.js

文件

编辑

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;
           

截图