Reactを使い、webpackでbundleしたコードを立ち上げた。
その後chromeで開いた際、<body>に取りたくないmarginがデフォルトで設定されていたので、取り除く対応を行った。
導入したライブラリはress.css。
ブラウザによってデフォルトで当てられてしまう各スタイルをノーマライズするために用いられるらしい。
類似ライブラリとしてnormalize.cssというものもある。
（詳しいことは公式のDocへ→ ress.css(github) ）
実際に導入する
1. npmでress.cssをインストールする
yarn add ress
2. 一番上位のjs(index.js)にimportする
index.js
import React from 'react';
import { render } from 'react-dom';
import * as serviceWorker from './serviceWorker';
import App from './App';
import 'ress'; // ress.cssをインポート
render(
<App/>,
document.getElementById('root')
);
serviceWorker.unregister();
webpackを用いてない場合はここまで。
webpackを用いている場合は、cssのインポートを解決してあげる為にloaderの設定をする。
(create-react-appを使っている場合でもwebpackは用いているが、必要なloaderはデフォルトで追加されている。)
3.webpack.config.js(webpackの設定ファイル）に必要なものを追加
webpack.config.js
~~略~~
module: {
rules: [
{
test:/\.css/,
use: [
'style-loader',
'css-loader',
],
},
~~略~~
これで`ress.css`が適用される。