Vue CLI 组件样式标记未限定范围未应用于 Rails CSP 错误

Posted 2023-02-15

【中文标题】Vue CLI 组件样式标记未限定范围未应用于 Rails CSP 错误

【英文标题】：Vue CLI component style tag NOT scoped not applied in Rails CSP error

【发布时间】：2021-11-16 01:16:30

【问题描述】：

我有一个带有 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"
  

（我删除了我的实际代码，但一开始也没有用）

当我在浏览器中使用检查编辑样式时，它可以工作。此外，当我添加内联样式时，它可以工作，例如：

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

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

【参考方案1】：

好的，我的第一个答案已被版主 Jean-François Fabre 删除，所以我将在此处再次简单回复，因为这是问题的解决方案，是的，我确实添加了指向外部网站的链接，但只是为了在应得的地方给予信任。

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