How does this work with semantic's custom fonts and icons

[metnew]

How does this work with semantic's custom fonts and icons

[Metnew]

Hi @ghostsquad, I don't know this secret. Just add next line to your entry. And configure webpack: add style-loader + css-loader (+ sass-loader, if you use SASS or similar preprocessor like Less). Does it solve your issue? In which part of your app you probably have a bug?

[ghostsquad]

Here's the full error:

ERROR in ./node_modules/css-loader!./node_modules/semantic-ui-css/semantic.css
Module not found: Error: Can't resolve './themes/default/assets/images/flags.png' in '/Users/wes/projects/react-dashboard/node_modules/semantic-ui-css'
 @ ./node_modules/css-loader!./node_modules/semantic-ui-css/semantic.css 6:118857-118908
 @ ./node_modules/semantic-ui-css/semantic.css
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/index.js

ERROR in ./node_modules/css-loader!./node_modules/semantic-ui-css/semantic.css
Module not found: Error: Can't resolve './themes/default/assets/fonts/icons.eot' in '/Users/wes/projects/react-dashboard/node_modules/semantic-ui-css'
 @ ./node_modules/css-loader!./node_modules/semantic-ui-css/semantic.css 6:154624-154674 6:154697-154747
 @ ./node_modules/semantic-ui-css/semantic.css
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/index.js

ERROR in ./node_modules/css-loader!./node_modules/semantic-ui-css/semantic.css
Module not found: Error: Can't resolve './themes/default/assets/fonts/icons.woff2' in '/Users/wes/projects/react-dashboard/node_modules/semantic-ui-css'
 @ ./node_modules/css-loader!./node_modules/semantic-ui-css/semantic.css 6:154797-154849
 @ ./node_modules/semantic-ui-css/semantic.css
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/index.js

ERROR in ./node_modules/css-loader!./node_modules/semantic-ui-css/semantic.css
Module not found: Error: Can't resolve './themes/default/assets/fonts/icons.woff' in '/Users/wes/projects/react-dashboard/node_modules/semantic-ui-css'
 @ ./node_modules/css-loader!./node_modules/semantic-ui-css/semantic.css 6:154880-154931
 @ ./node_modules/semantic-ui-css/semantic.css
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/index.js

ERROR in ./node_modules/css-loader!./node_modules/semantic-ui-css/semantic.css
Module not found: Error: Can't resolve './themes/default/assets/fonts/icons.ttf' in '/Users/wes/projects/react-dashboard/node_modules/semantic-ui-css'
 @ ./node_modules/css-loader!./node_modules/semantic-ui-css/semantic.css 6:154961-155011
 @ ./node_modules/semantic-ui-css/semantic.css
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/index.js

ERROR in ./node_modules/css-loader!./node_modules/semantic-ui-css/semantic.css
Module not found: Error: Can't resolve './themes/default/assets/fonts/icons.svg' in '/Users/wes/projects/react-dashboard/node_modules/semantic-ui-css'
 @ ./node_modules/css-loader!./node_modules/semantic-ui-css/semantic.css 6:155045-155095
 @ ./node_modules/semantic-ui-css/semantic.css
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 babel-polyfill ./src/index.js

My webpack config looks like this:

const isProduction = process.env.NODE_ENV === 'production';

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");


const modulesDirectory = path.resolve(__dirname, 'node_modules');
const sourceDirectory = path.resolve(__dirname, 'src');
const staticDirectory = path.resolve(__dirname, 'static');
const distDirectory = path.resolve(__dirname, 'dist');

// -------------------------------------------------------------------------- //

module.exports = {
  entry: [
    'babel-polyfill',
    path.resolve(sourceDirectory, 'index.js')
  ],
  output: {
    path: distDirectory,
    filename: 'index.js',
    publicPath: '/'
  },
  devtool: 'source-map', // any "source-map"-like devtool is possible
  devServer: {
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        enforce: 'pre',
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true
            }
          },
          {
            loader: 'eslint-loader'
          }
        ],
      },
      {
        test: /\.(ico|eot|otf|webp|ttf|woff2?|gif|png|jpe?g|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              limit: 100000,
              name: 'assets/[name].[sha1:hash:base64:8].[ext]'
            }
          }
        ]
      },
      {
        test: /\.css$/,
        include: /node_modules/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
          }
        ]
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              modules: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'resolve-url-loader'
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.css', '.jpeg', '.jpg', '.png', '.gif', '.svg'],
    alias: {
      '_': sourceDirectory,
      'react': 'preact-compat',
      'react-dom': 'preact-compat'
    },
    modules: [
      sourceDirectory,
      modulesDirectory
    ]
  },
  plugins: [
    new DashboardPlugin(),
    new CopyWebpackPlugin([
      {
        from: staticDirectory,
        to: distDirectory
      }
    ]),
    new HtmlWebpackPlugin({
      title: 'React Dashboard',
      filename: path.resolve(distDirectory, 'index.html')
    }),
    new ManifestPlugin()
  ]
};

I'm almost to the point where I just want to vendor in the necessary themes and icons/fonts straight from semantic-ui source

[Metnew]

@ghostsquad I think it would be better if you modify your current project's webpack config to a similar config in the starter. It would be easier to debug (from my point of view) + probably your issue disappear after that. I faced similar issue when I was working on vue-element-starter, but it was resolved after resolve-url-loader was added.