score:1

i was having the same issue, i solved it by splitting the webpack's css loader rules into 2:

  1. will include everything except node_modules, uses css modules. this will deal with internal css modules.
  2. will only include node_modules, exclude /src. this will deal with semantic-ui and any other third-party library

the resulting rules on webpack.config.dev.js generated by cra's eject script, would look like this:

// internal css
      // "postcss" loader applies autoprefixer to our css.
      // "css" loader resolves paths in css and adds assets as dependencies.
      // "style" loader turns css into js modules that inject <style> tags.
      // in production, we use a plugin to extract that css to a file, but
      // in development "style" loader enables hot editing of css.
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importloaders: 1,
              modules: true,
              localidentname: '[name]__[local]___[hash:base64:5]'
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              // necessary for external css imports to work
              // https://github.com/facebookincubator/create-react-app/issues/2677
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'firefox esr',
                    'not ie < 9', // react doesn't support ie8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          },
        ],
      },
// external css
      {
        test: /\.css$/,
        include: /node_modules/,
        exclude: /src/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importloaders: 1,
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              // necessary for external css imports to work
              // https://github.com/facebookincubator/create-react-app/issues/2677
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'firefox esr',
                    'not ie < 9', // react doesn't support ie8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          },
        ],
      },

i don't think this answer is optimal, but certainly worked for me. good luck

score:2

add the following in the rules section:

   const config = {
        entry: {
            vendor: ['semantic-ui-react'],
        },
        ...,
        module: {
            rules: [
                ...,
                {
                    test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                    loader: require.resolve('url-loader'),
                    options: {
                        limit: 10000,
                        name: 'static/media/[name].[hash:8].[ext]',
                    },
                },
                {
                    test: [/\.eot$/, /\.ttf$/, /\.svg$/, /\.woff$/, /\.woff2$/],
                    loader: require.resolve('file-loader'),
                    options: {
                        name: 'static/media/[name].[hash:8].[ext]',
                    },
                },
            ],
        },
     ...,
    };

    module.exports = config

hopes it helps !


Related Query

More Query from same tag