Rails 5.1 app with Vue and webpacker 3, css not compiled

Question

I'm trying to add Element UI to my Vue app. I follow the quick start tutorial and I have my application.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/it'
import App from '../app.vue'

Vue.use(ElementUI, { locale })

document.addEventListener('DOMContentLoaded', () => {
  document.body.appendChild(document.createElement('app'))
  const app = new Vue(App).$mount('app')

  console.log(app)
})

I'm importing the CSS and I have also

<%= stylesheet_link_tag 'application' %>

Inside my layout, but this file is empty, no styles. The app is working, but without the CSS. Where is my fault?

Answer 1

The problem is in the import method

Use

<%= stylesheet_pack_tag 'application', media: 'all' %>

Instead of

<%= stylesheet_link_tag 'application' %>

based on: https://github.com/rails/webpacker/issues/987