Semantic-UI-CSS: Unable to load semantic-ui-css with extract text plugin webpack

Adding url-loader to the config solves the issue for me:

{
  test: /\.(png|woff|woff2|eot|ttf|svg)$/,
  loader: 'url-loader?limit=100000'
}

And you need to npm i url-loader file-loader -S

I’ve consolidated all the recommendations into a single post that worked for me.

1. Ensure you have installed yarn save --dev url-loader file-loader css-loader style-loader

2. Basic webpack config only relating to adding semantic-ui-css. I followed the guide from https://github.com/webpack-contrib/css-loader. You don’t need sass loaders given its already a minified css file.

Note:

• The css loader inclues node modules, include: /node_modules/
• postcss is optional

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 100000,
          },
        },
      },
      {
        test: /\.css$/,
        include: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: 'css-loader',
            },
            {
              loader: 'postcss-loader',
            },
          ],
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

1. import ‘semantic-ui-css/semantic.min.css’; in your index.js file.

The errors are pretty standard, it means that webpack doesnt understand the file type and cant parse the contents. 99% its a missing or misconfigured loader. The full semantic-ui package actually works well with webpack, I’ll post a guide about setting it all up later.

@chainlink you should post your webpack config for troubleshooting

Documentation is not clear on how to resolve this issue. I tried almost all the options from this thread but it still gives me this error.

Edit: somehow I missed that the thread is specifically about using the ExtractTextPlugin to load the CSS. I’ll leave this here for anybody anyway though as I ended up here when I faced a similar problem.

Webpack and all the other parts are still a bit of a magic box to me, so apologies for not having more insight – but here’s a setup that might work if the others haven’t.

I was able to resolve the issue @wildcookie007 was getting, and another error when resolving the .png country flag images in the library by using a combination of css-loader, style-loader, and file-loader in the following way…

module: {
    rules: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_componets)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
                    plugins: [
                        '@babel/transform-runtime',
                        '@babel/syntax-dynamic-import',
                        '@babel/proposal-class-properties'
                    ]
                }
            }
        },
        {
            test: /\.css$/,
            use: [{
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader'
                }
            ]
        },
        {
            test: /\.(ttf|eot|svg|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            use: [{
                loader: 'file-loader'
            }]
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: [{
                loader: 'file-loader'
            }]
        }
    ]
}

In the root JS file of the project: import 'semantic-ui-css/semantic.min.css'

Had the same issue with using semantic-ui-css module and finally realised that the problem was in excluding node_modules folder from working dirs of css loader. Just make shure that your config allows css-loader to handle node_modules/semantic-ui-css. Hope this will help anybody.

Was able to install semantic-ui-css by: create file styles.global.scss with @import '~semantic-ui-css/semantic.css'; then import it in js files import './styles/styles.global.scss'

these are my loader { test: /.(ttf|eot|svg|woff|woff2)(?v=[0-9].[0-9].[0-9])?$/, use: [{ loader: ‘file-loader’ }] }, { test: /.(png|jpg|gif)$/, use: [{ loader: ‘file-loader’ }] }, { test: /.html$/, use: [ { loader: “html-loader” } ] }, { test: /.css$/, use: [{ loader: ‘style-loader’ }, { loader: ‘css-loader’ } ] }, { test: /.(sass|scss)$/, use: [ { loader: ‘style-loader’ }, { loader: ‘css-loader’ }, { loader: ‘sass-loader’ }, ] }

hope this is helpful. it seems to be working fine for now

Hello all, I have been struggling with the similar issue… not able to parse module, unexpected char ‘@’ BTW, which version of webpack is everybody using? I happen to use webpack^3.3.0, not sure if this can be a problem.

Here is my webpack code, and I don’t really know what I am doing after hours of searching the right solution. I’d really appreciate your insights…

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractCSS = new ExtractTextPlugin('semantic/semantic.min.css');
const autoprefixer = require('autoprefixer');

module.exports = {

  entry: [
    path.resolve('./client/index.js'),
    'webpack-dev-server/client?http://0.0.0.0:3001',
    'webpack/hot/only-dev-server'
  ],

  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },

  resolve: {
    extensions: ['.js', '.jsx', '.css']
  },

  devServer: {
    hot: true,
    filename: 'bundle.js',
    publicPath: '/',
    historyApiFallback: true,
    contentBase: './public',
    proxy: {
        "*": "http://localhost:3000"
    }
  },

    plugins: [
      new webpack.HotModuleReplacementPlugin(), // Enable HMR
      new webpack.NoEmitOnErrorsPlugin(),
      extractCSS,
      new webpack.LoaderOptionsPlugin({ options: { postcss: [ autoprefixer ] } })
    ],

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        include: path.join(__dirname, 'client'),
        use: ['react-hot-loader', 'babel-loader?' + JSON.stringify({
          cacheDirectory: true,
          presets: ['es2015', 'react']
        })],
      },
      {
        test: /\.css$/,
        include: /node_modules/,
        use: extractCSS.extract([
          'style-loader',
          'css-loader!postcss-loader',
          'resolve-url-loader'
        ]),
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        use: ['url-loader?limit=100000']
      }
    ]
  }
};