Semantic ui installation doesn't work in Rails 6

user_7131245 0
Viewed 324

I'm trying to install semantic ui in my Rails 6 application but doesn't work, i'm following the guide of this repo,(for rails 6 +) and I did some steps like this:

I added a packages with yarn:

yarn add jquery popper.js semantic-ui-sass

After this In config/webpack/environment.js I added this:

const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))

And my last step i did this in app/javascript/packs/application.js:

require("semantic-ui-sass")

After I followed this steps that included in the guide of the repository, nothing changes at all

semantic-ui ruby-on-rails-6 webpack ruby-on-rails
1 Answers

In the repository link you have given this is not the last step which you have mentioned if you are using yarn to add semantic UI. First add packages with yarn:

yarn add jquery popper.js @doabit/semantic-ui-sass

Then in config/webpack/environment.js add:

 

    const webpack = require('webpack')
    
    environment.plugins.append(
      'Provide',
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default']
      })
    )

Then in app/javascript/packs/application.js add:

import '@doabit/semantic-ui-sass'

Then in last step if your application is using webpacker for css files you have to import this file in your css stylesheets

@import '@doabit/semantic-ui-sass/src/scss/semantic-ui.scss'
user_137819660
Related