技術標籤：reactlessreactvuewebpack

安裝 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;

截圖