XXとしてる: JS内でCSSをインポートしたいときはcss-loaderのmodulesをtrueにしよう。

# タイトル通りです。

## 解決例

webpackを使っているときの話で、以下のような設定にしましょう！

```js
export.modules = {
  module: {
    rules: [
      {
        test: /\.css?$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true // 必要！
            }
          }
        ]
      },
// SASS/SCSSのとき
      {
        test: /\.scss?$/,
        use: [
          "style-loader", {
            loader: "css-loader",
            options:{
              modules: true // 必要！
            }
          },
          "sass-loader"
        ]
      },
    ]
  }
}
```

## この機能のことをCSS Modulesって言うんだって！

[CSS Modules](https://github.com/css-modules/css-modules)から
> CSS Moduleは全てのクラス名とアニメーション名がデフォルトでローカルにスコープされるCSSファイルである。
> 全てのURLs(`url(...)`)と`@imports`は要求したフォーマットでモジュールの中にある(`./xxx`と`../xxx`は相対パスを意味し、`xxx`と`xxx/yyy`は例えば`node_modules`の中といったモジュールフォルダーを意味する)。

CSSはあまり詳しくないのだけど、色々発展しているそうでCSS Modulesもその機能の一つだそうだ。

これを使うことで次のようなコードが書くことが出来る。

ファイルの位置関係については同じディレクトリにあるものとしてほしい。

```js
import * as React from 'react'
import * as ReactDOM from 'react-dom'

import MyStyle from './my-style.css'

ReactDOM.render(
  <div className={MyStyle.Title}>見出しだよ！</div>
  , document.getElementById('root'))

```

CSSファイルはこんな感じ。

```css
/*my-style.css*/
.Title {
  font-size: 72px;
  color: red;
}
```

この機能によってCSSがJSコード内で使いやすくなる恩恵があるとかないとか。

CSSのクラス名を変更したらJS側も変更しないと何らかのエラーが起きやすくなっていると思うので、是非使いたい機能だ。

(使う際はJS側で扱いやすいように名前をキャメルケースで書いたほうが捗ると思う。)

## TypeScriptを使っているときは型定義も一緒に作ってね！

[こちらを参考にしています](https://qiita.com/jerrywdlee/items/3c525001f8029312d5fa)

これで名前とか変更してもコンパイル時にわかるようになるし、IDEとかでコード補間が効いてコーディングしやすくなる。

```js
// my-style.d.ts
declare module '*.scss' {
  const content: {
    Title: string;
  }
  export default content
}
```

記事に書いてあるが、CSSファイルを作るたびに型定義を書くのは面倒なので一つのファイルにまとめて書くのがおすすめ。

```js
declare module 'foo.css' {
  const content: {
    bar: string;
    baz: string;
  };
  export = content;
}

declare module 'bar.scss' {
  const content: {
    baz: string;
  };
  export = content;
}
```

## 終わり

<div style="text-align: center">フロントエンドって依存パッケージがたくさんあって大変だね！</div>

開発環境を整備するのが一番大変かもしれない…

（画像は以下のものを使用させていただきました。）

XXとしてる

2019年4月12日金曜日

JS内でCSSをインポートしたいときはcss-loaderのmodulesをtrueにしよう。

0 件のコメント:

コメントを投稿