Add SemanticUI CSS

Universal Dashboard UD Development
1

In order to have a default style for all elements I have to add the “semantic-ui-css”.

After installing with the following command I cannot build anymore: npm install semantic-ui-css --save

.\build.ps1
ERROR in ./node_modules/ERROR in ./node_modules/semantic-ui-css/themes/default/assets/images/flags.png 1:0
Module parse failed: Unexpected character ‘�’ (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

  • @ ./node_modules/semantic-ui-css/semantic.min.css (./node_modules/css-loader/dist/cjs.js!./node_modules/semantic-ui-css/semantic.min.css) 5:38-89*
  • @ ./node_modules/semantic-ui-css/semantic.min.css*
  • @ ./components/index.js/themes/default/assets/images/flags.png 1:0*
    Module parse failed: Unexpected character ‘�’ (1:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    (Source code omitted for this binary file)
  • @ ./node_modules/semantic-ui-css/semantic.min.css (./node_modules/css-loader/dist/cjs.js!./node_modules/semantic-ui-css/semantic.min.css) 5:38-89*
  • @ ./node_modules/semantic-ui-css/semantic.min.css*
  • @ ./components/index.js*

I have added the the following code to the index.js

//https://react.semantic-ui.com/usage
import 'semantic-ui-css/semantic.min.css';

Does anyone have an idea whats going on and how I can resolve the problem?

2

You need to install the CSS loader for webpack.

In package.json, import the package: https://github.com/ironmansoftware/universal-dashboard/blob/master/src/client/package.json#L55

In the webpack.config.js, add the loader to the module rules.

3

@adam

Thanks for the quick reply

It seams that both configurations are done in my project:

src\webpack.config.js
{ test: /\.css$/, loader: "style-loader!css-loader" },

src\package.json
"css-loader": "^3.2.0",

I also tried to change the version to the example you gave me, no luck :confused:

4

Oh, whoops. It’s actually failing on an image and not the CSS. Try the file loader.

Package.json

"file-loader": "2.0.0",

webpack.config.js

{ test: /\.(eot|ttf|woff2?|otf|svg|png)$/, loader:'file-loader', options: {
          name: '[name].[ext]'
        } }
5

@adam

excellent the build is now working including just a few new warnings

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
962a1bf31c081691065fe333d9fa8105.svg (382 KiB)
a1a749e89f578a49306ec2b055c073da.svg (496 KiB)
index.25ed329d89411462e0f8.bundle.js (665 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
index (665 KiB)
index.25ed329d89411462e0f8.bundle.js

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit Code Splitting | webpack

Now it look better but CSS is not fully working but better than before.
I will work on it.

:slight_smile: thanks for your help

1 Like