1

我试图让 vue2-dropzone（版本 3.0.3）与我的 Rails 5.1.4 应用程序很好地合作。我已将 Dropzone 添加到我的表单并加载了模块，但不知何故我无法看到默认样式。我不认为这是 vue2-dropzone 的问题，而是 webpacker 如何加载 css 的问题。

我目前的设置：

应用程序.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.但我确实认为 webpackvue2Dropzone.css出于某种原因没有加载。我应该如何配置 webpacker 以加载该 css 文件？

如果我将 css 文件手动放入我的文件中，app/assets/stylesheets/则它可以正常工作。

提前致谢！

4

1 回答 1

1

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

这是我在项目中的做法。在 packs 文件夹中创建 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

于 2018-02-03T15:55:35.387 回答