酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

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

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


Installation

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

1
2
3
4
$ 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 に以下を追加。

1
2
3
{
   "plugins": ["transform-decorators-legacy"]
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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のモジュールは以下の様に書きます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 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 場合は以下の様に書きます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 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}>
            <div className={styles.row}>
                <div className={styles.cell}>A0</div>
                <div className={styles.cell}>B0</div>
            </div>
        </div>;
    }
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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'>
            <div styleName='row'>
                <div styleName='cell'>A0</div>
                <div styleName='cell'>B0</div>
            </div>
        </div>;
    }
}

Happy Hacking!

Special Thanks

おすすめの書籍