Question

我正在尝试使用vue2-dropzone（版本3.0.3）与我的Rails 5.1.4应用程序很好地配合。我已经将Dropzone添加到我的表单并加载了模块，但不知怎的，我无法看到默认样式。我不认为这与vue2-dropzone有关，就像webpacker如何加载css一样。

我目前的设置：

的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" }
      }
    }
  }

和我的 _form.html.erb 部分：

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

我看到Dropzone表单已加载。但是，我看不到默认样式。我在运行时在控制台中看到以下内容：

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]

我不认为这是一个错误，因为它说webpack: Compiled successfully.但我认为webpack由于某种原因没有加载vue2Dropzone.css。我应该如何配置webpacker来加载该css文件？

如果我将css文件手动放入我的app/assets/stylesheets/，那么它可以正常运行。

提前致谢！

Answer 1

我认为你的CSS文件应该加载到CSS而不是js中。

以下是我在项目中的表现。在包文件夹中创建application.css并导入到Rails布局文件application.html.erb中 <%= javascript_pack_tag 'application' %>

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

如果你这样做，你会收到一个错误，因为@import是一种sass语法。所以你需要做一些额外的webpack配置。

如果你想在application.js文件中使用css，你会发现这篇文章很有用。

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

使用Rails 5＆amp; D无法加载样式vue2 - 悬浮窗

1 个答案: