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;
           

截圖