Cannot get styles to load with Rails 5 & vue2-dropzone

Question

I'm trying to get vue2-dropzone (version 3.0.3) to cooperate nicely with my Rails 5.1.4 app. I've added Dropzone to to my form and loaded the module but somehow I am not able to see the default styles. I don't think this is a problem with vue2-dropzone as much as with how webpacker loads the css.

My current setup:

application.js

import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.css'

const myForm = new Vue({
  el: '#multistep-form',
  components: {
    vueDropzone: vue2Dropzone
  },
  data: function () {
    return {
      dropzoneOptions: {
        url: 'https://httpbin.org/post',
        thumbnailWidth: 150,
        maxFilesize: 5,
        dictDefaultMessage: "<i class='fa fa-cloud-upload'></i> Drop files here to upload",
        headers: { "My-Awesome-Header": "header value" }
      }
    }
  }

and my _form.html.erb partial:

<vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions">
</vue-dropzone>

I see that the Dropzone form is loaded. However, I cannot see the default style. I see the following in the console when I run :

Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--1-2!node_modules/postcss-loader/lib/index.js??ref--1-3!node_modules/vue2-dropzone/dist/vue2Dropzone.css:
       [0] ./node_modules/css-loader?{"minimize":false,"sourceMap":true,"importLoaders":2}!./node_modules/postcss-loader/lib?{"sourceMap":true,"config":{"path":"/Users/myuser/Documents/apps/myapp/.postcssrc.yml"}}!./node_modules/vue2-dropzone/dist/vue2Dropzone.css 30.5 kB {0} [built]

I don't think it's an error since it says webpack: Compiled successfully. but I do think that webpack isn't loading vue2Dropzone.css for some reason. How should I configure webpacker to load that css file?

If I put the css file manually into my app/assets/stylesheets/ then it works without a problem.

Thanks in advance!

Answer 1

I think your CSS file should be loaded in CSS and not in js.

Here's how I'm doing it in my project. Create application.css in packs folder and import into the Rails layout file, application.html.erb <%= javascript_pack_tag 'application' %>

@import 'vue2-dropzone/dist/vue2Dropzone.css'

If you do this though, you will get an error because @import is a sass syntax. So you will need to do some extra webpack config.

You will find this post useful if you want to use css inside the application.js file.

https://medium.com/@mayorsan/rails-angular-webpacker-gem-like-a-pro-7cf40a588ab9