CSS-ModulesとReact.jsを組み合わせると便利! 


React.jsでCSS用のためのしくみを提供してくれる react-css-modules の紹介です。
このツールを使うことでReactのClassの中でCSSを紐付けることができます。SASSも扱えます!


🎂 Installation

ライブラリのインストール手順です。

$ npm init -y
$ npm install --save react react-dom
$ npm install --save-dev webpack style-loader css-loader sass-loader node-sass extract-text-webpack-plugin
$ npm install --save-dev resolve-url resolve-url-loader babel-plugin-transform-decorators-legacy

🐞 Setup CSS loader

.babelrc に以下を追加。

{
"plugins": ["transform-decorators-legacy"]
}

webpack.config.js に以下を追加してください。

module: {
loaders: [
{
test: /\.css$/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
]
},
{
test: /\.scss$/,
loaders: [
'style',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
'resolve-url',
'sass'
]
}
]
}

🍣 Usage

CSSのモジュールは次の様に書きます。

/* css/table-custom-styles.scss */
.table {
width: 400px;
}

.row {
composes: row from './table.css';
}

.cell {
float: left; width: 154px; background: #eee; padding: 10px; margin: 10px 0 10px 10px;

a {
color: #fff;
}
}

ES6場合は以下のように書きます。

// components/Table.jsx
import React from 'react';
import styles from '../css/table.css';

export default class Table extends React.Component {
render () {
return <div className={styles.table}>

A0

B0

div>
div>;
}
}

ES7のdecorators syntaxの場合はこんな感じです。

// components/Table.jsx
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';

@CSSModules(styles)
export default class extends React.Component {
render () {
return <div styleName='table'>

A0

B0

div>
div>;
}
}

Happy Hacking!

🚌 参考リンク

🖥 VULTRおすすめ

VULTR」はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。 最近はVULTRのヘビーユーザーになので、「ここ」から会員登録してもらえるとサービス開発が捗ります!

📚 おすすめの書籍