Use with semantic-ui-react

[evangow]

While the below refers to semantic-ui, I would guess the same problem occurs with other ui frameworks.

Installed the boilerplate

$ git clone https://github.com/jhen0409/react-chrome-extension-boilerplate.git
$ npm install

Installed semantic ui from https://react.semantic-ui.com/usage

$ npm install semantic-ui-react --save
$ npm install semantic-ui-css --save

Imported semantic css inside /app/containers/Root.js
import 'semantic-ui-css/semantic.min.css';

I then get the following errors

ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css
Module not found: Error: Cannot resolve module 'themes/default/assets/images/flags.png' in /Users/evangow/workspace/tuts/boilerplate-wsemui/node_modules/semantic-ui-css
 @ ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css 6:202659-202708

ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css
Module not found: Error: Cannot resolve module 'themes/default/assets/fonts/icons.eot' in /Users/evangow/workspace/tuts/boilerplate-wsemui/node_modules/semantic-ui-css
 @ ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css 6:264152-264200 6:264218-264266

ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css
Module not found: Error: Cannot resolve module 'themes/default/assets/fonts/icons.woff2' in /Users/evangow/workspace/tuts/boilerplate-wsemui/node_modules/semantic-ui-css
 @ ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css 6:264315-264365

ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css
Module not found: Error: Cannot resolve module 'themes/default/assets/fonts/icons.woff' in /Users/evangow/workspace/tuts/boilerplate-wsemui/node_modules/semantic-ui-css
 @ ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css 6:264395-264444

ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css
Module not found: Error: Cannot resolve module 'themes/default/assets/fonts/icons.ttf' in /Users/evangow/workspace/tuts/boilerplate-wsemui/node_modules/semantic-ui-css
 @ ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css 6:264473-264521

ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css
Module not found: Error: Cannot resolve module 'themes/default/assets/fonts/icons.svg' in /Users/evangow/workspace/tuts/boilerplate-wsemui/node_modules/semantic-ui-css
 @ ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css 6:264554-264602

Trying to solve this, I then installed file-loader and url-loader
npm install --save-dev file-loader
npm install --save-dev url-loader

And I updated /webpack/dev.config.js to use these loaders for the various image file types.

module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['react-hmre']
        }
      },
      {
        test: /\.css$/,
        loaders: [
          'style',
          'css?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'postcss'
        ]
      },
      {
        test: /\.(png|gif)$/,
        loader: 'url-loader?limit=1024&name=[name]-[hash:8].[ext]!image-webpack-loader'
      },
      {
        test: /\.jpg$/,
        loader: 'file-loader'
      },
      {
        test: /\.(ttf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader'
      }
    ]
  }

After updating /webpack.dev.config, I continue to get the exact same error.

[HaveF]

@evangow you can put css file to chrome/assets/ directly, and use it in xxx.pug file directly. it is the easiest way.

[nagacoder]

some issue, any suggestion for this problem?