Using an alias results in an error

[yoneapp]

I got such an error.

ERROR in ./src/components/score.js
Module build failed: Error: /Users/yoneapp/Desktop/webpack-css-load-sample/src/components/score.js: Cannot find module 'common/style.css'
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.resolve (internal/module.js:18:19)
    at getTargetResourcePath (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-plugin-react-css-modules/dist/index.js:99:20)
    at PluginPass.ImportDeclaration (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-plugin-react-css-modules/dist/index.js:127:36)
    at newFn (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitMultiple (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/context.js:103:17)
    at TraversalContext.visit (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/context.js:190:19)
    at Function.traverse.node (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/index.js:114:17)
    at NodePath.visit (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/path/context.js:115:19)
    at TraversalContext.visitQueue (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (/Users/yoneapp/Desktop/webpack-css-load-sample/node_modules/babel-traverse/lib/index.js:114:17)
 @ ./src/components/box.js 13:13-31
 @ ./src/app.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app.js

src/components/score.js

import React from 'react'
import style from 'common/style.css'

class Score extends React.Component {
  render() {
    return <div styleName="style.score">25</div>
  }
}

export default Score

webpack.config.js

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    publicPath: "/",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: "[path]___[name]__[local]___[hash:base64:5]"
            }
          }
        ],
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.ejs'
    })
  ],
  devtool: 'source-map',
  resolve: {
      modules: [
        path.resolve(__dirname, "src"),
        "node_modules"
      ],
      extensions: ['.js'],
      alias: {
        common: path.resolve(__dirname, 'src/common/')
      }
  }
}

Sample Code:
https://github.com/yoneapp/webpack-css-load-sample/tree/add_alias

Related questions:
https://stackoverflow.com/questions/45069167/how-to-root-path-loading-of-css-in-webpack

[gajus]

#46