babel-plugin-react-css-modulesの導入方法を知る

[syunto07ka]

[syunto07ka]

https://github.com/gajus/babel-plugin-react-css-modules#how-does-it-work

[syunto07ka]

エラーなった

解決策っぽいやつ？
gajus/babel-plugin-react-css-modules#41

[syunto07ka]

エラー変わった。

Failed to compile.

./src/index.tsx
Error: /Users/syunto/development/jewelry_box/src/index.tsx: Cannot find module 'postcss-scss'
Require stack:
- /Users/syunto/development/jewelry_box/node_modules/babel-plugin-react-css-modules/dist/requireCssModule.js
- /Users/syunto/development/jewelry_box/node_modules/babel-plugin-react-css-modules/dist/index.js
- /Users/syunto/development/jewelry_box/node_modules/@babel/core/lib/config/files/plugins.js
- /Users/syunto/development/jewelry_box/node_modules/@babel/core/lib/config/files/index.js
- /Users/syunto/development/jewelry_box/node_modules/@babel/core/lib/index.js
- /Users/syunto/development/jewelry_box/node_modules/babel-loader/lib/index.js
- /Users/syunto/development/jewelry_box/node_modules/loader-runner/lib/loadLoader.js
- /Users/syunto/development/jewelry_box/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/syunto/development/jewelry_box/node_modules/webpack/lib/NormalModule.js
- /Users/syunto/development/jewelry_box/node_modules/webpack/lib/NormalModuleFactory.js
- /Users/syunto/development/jewelry_box/node_modules/webpack/lib/Compiler.js
- /Users/syunto/development/jewelry_box/node_modules/webpack/lib/webpack.js
- /Users/syunto/development/jewelry_box/scripts/start.js
 ~/development/jewelry_box  add_babel_plugin_react_css_modules●●  0m                                                                                                                                 

以下２つの設定ファイルをいじった

webpack.config.js

{
        loader: require.resolve('css-loader'),
        options: {
          ...cssOptions,
          localIdentName: "[path]___[name]__[local]___[hash:base64:5]",
          modules: true
        },
      },

package.json

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
				"react-css-modules",
				{
					"filetypes": {
            ".scss": {
              "syntax": "postcss-scss"
            }
					}
				}
			]
    ]
  },

[syunto07ka]

エラー変わった

解決策これかな
rails/webpacker#2197

css-loaderのwebpack設定の方法が変わってるらしい

https://github.com/webpack-contrib/css-loader/blob/master/CHANGELOG.md#300-2019-06-11

"css-loader": "3.4.2",

3.0.0以上だからビンゴっぽい

[syunto07ka]

上のに加えて、typescriptのerror出てた。

styleName型にないよって言われてて

npm install --save @types/react-css-modules

これやったら解決(まあそりゃそうだなと)

import React from 'react';
import logo from './logo.svg';
import './App.scss';

function App() {
  return (
    <div styleName="app">
      <header styleName="appHeader">
        <img src={logo} styleName="appLogo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          styleName="appLink"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

で無事表示

[syunto07ka]

#48 にて導入方法はわかったのでこのissueはclose

[piro0919]

まだ解決できていないのにcloseしないでくださーい 🙅‍♂️

[syunto07ka]

🙇

[piro0919]

rel #54

[piro0919]

@syunto07ka

#54 でかなり理解されたと思うので、ここまできたら導入してしまって問題ないと思います。
素の css modules と違いきちんと linter に沿えるようになるため、導入して損はないかと。