Vue CLI 组件样式标签 NOT scoped not applied in Rails CSP 错误

Question

我有一个使用 Vue 的 Rails 应用程序。当我尝试在 <style> 标签中添加内容时，它没有被应用。它在呈现的 HTML 中也不可见。我的依赖项中没有 css-loader，当我安装它时，整个应用程序无法运行。

我的index.html.erb

<%= stylesheet_pack_tag 'hello_vue' %>
<%= javascript_pack_tag 'hello_vue' %>

我的hello_vue.js

import Vue from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)

  console.log(app)
})

我的app.vue

<template>
  <div id="app">
  </div>
</template>

<script>

export default {
}

</script>

<style>
#app{
  background: aqua;
}
</style>

我的 package.json 使用 css-loader（不工作）

{
  "name": "name-of-project",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.3",
    "css-loader": "^6.3.0",
    "leaflet": "^1.7.1",
    "turbolinks": "^5.2.0",
    "vue": "^2.6.14",
    "vue-loader": "^15.9.8",
    "vue-template-compiler": "^2.6.14",
    "vue2-leaflet": "^2.7.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@vue-leaflet/vue-leaflet": "^0.6.1",
    "webpack-dev-server": "^3"
  }
}

（我删除了我的实际代码，但它一开始也不起作用）

当我在浏览器中使用 inspect 编辑样式时，它起作用了。此外，当我添加内联样式时，它会起作用，例如：

我用rails install:webpacker:vue命令安装了vue。当我只创建一个vue项目时，它工作得很好，但是，这次使用vue它似乎没有工作，我不知道为什么。

编辑：它与样式标签因 CSP 而被阻止加载这一事实有关。根据 Vue 的说法，这不应该发生，但它确实发生了，并且在网络上没有答案。

Answer 1

好吧，我的第一个答案被版主Jean-François Fabre删了，所以我就在这里简单回复一次，因为这个是的解决方案问题，是的，我确实在外部网站上添加了 link，但只是为了在到期时给予信用。

如果有人遇到同样的问题，我在 Medium post 上找到了解决方案。最重要的部分是 rails/webpacker.README.mb 的截图，我在当前 README.md 上找不到了。

Vue CLI 组件样式标签 NOT scoped not applied in Rails CSP 错误

Vue CLI component style tag NOT scoped not applied in Rails CSP error

css

ruby-on-rails

vue.js

vue-component

vue-cli