Webpack React項目中使用CSS-Module

輸入：

//webpack.config.js

{
  test: /\.css$/,
  use: [
    "style-loader", 
    "css-loader?modules&localIdentName=[name]-[local]-[hash:base64:5]"
  ]
},
//對於Sass文件
{
  test: /\.scss$/,
  use: [
    "style-loader",
    "css-loader?modules&localIdentName=[name]-[local]-[hash:base64:5]",
    "sass-loader"
  ]
}

//components/index.scss

.bar {
  position: relative
}

// components/index.jsx

import React from 'react'
import styles from './index.scss'

export default class Tabs extends React.Component {

  render() {
    return (
      <div className={ styles.bar }>Tabs</div>
    )
  }
}

輸出結果：

// localhost:8080/index.html

<div class="index-bar-2bZMt">Tabs</div>

What’s More

如果想使用styleName替代className，參考：
https://blog.csdn.net/u012515877/article/details/90210374