이슈 2 electron-webpack에서 CSS Module 사용하기

2020/01/12 - [엥휴/이슈] - electron-webpack-quick-start에 react 설치하기

import styles from './react.css'식으로 사용하는 CSS module 기능도 electron-react-boilerplate에선 분명 되던 기능인데, electron-webpack-quick-start에서는 안 됐다. webpack.config.js를 만져줘야 하지만,documentation에서는 직접 접근하기보다 아래와 같은 방식을 추천한다.

 

{
  "electronWebpack": {
    "renderer": {
      "webpackConfig": "webpack.renderer.additions.js"
    }
  }
}

 

package.json과 같은 경로에 webpackConfig에 적은 내용과 같은 이름의 파일을 만들고 아래 코드를 넣는다. 이렇게 하면 이름 중간에 module을 넣은 local.module.css와 같은 파일은 CSS module 형식으로 사용할 수 있고, 충돌을 방지하도록 class name이 해쉬화 된다.

 

module.exports = function(config) {
  const globalRule = config.module.rules.find(rule => rule.test.toString().match(/css/))
  globalRule.exclude = /\.module\.css$/

  const localRule = {
    test: /\.css$/,
    use: [
      'css-hot-loader',
      './node\_modules/mini-css-extract-plugin/dist/loader.js',
      {
        loader: 'css-loader',
        options: { importLoaders: 1, modules: true }
      }
    ],
    include: /\.module\.css$/,
    exclude: /\.global\.css$/
  }
  config.module.rules.push(localRule)
  return config
}

 

적용은 <App className={styles.app} />처럼 하면 된다.