babel-plugin-react-css-modules

react-css-modules - npm

GitHub - gajus/babel-plugin-react-css-modules: Transforms styleName to className using compile time CSS module resolution.

相比較react-css-modules，babel-plugin-react-css-modules是更好的替代方案

輸入

//.babelrc

["react-css-modules", { 
      "filetypes": { 
        ".scss": {
          "syntax": "postcss-scss"
        }
      },
      "generateScopedName": "[name]-[local]-[hash:base64:5]" //需與webpack配置中的localIdentName相匹配
    }]

//webpack.config.js

{
  test: /\.css$/,
  use: [
    "style-loader", 
    "css-loader?modules&localIdentName=[name]-[local]-[hash:base64:5]"
  ]
},
{
  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 './index.scss'

export default class Tabs extends React.Component {

  render() {
    return (
      <div styleName="bar">Tabs</div>
    )
  }
}

輸出

// localhost:8080/index.html

<div class="tabs-bar-2pfAI">Tabs</div>