Style tag does not load with Rails

I have a Rails app with Vue. When I try to add something in the <style> tag, it does not get applied. It is also not visible in the rendered HTML. I do not have the css-loader in my dependencies and when I install it, the entire application does not work.

My index.html.erb

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

My hello_vue.js

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

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App)


My app.vue

  <div id="app">


export default {


  background: aqua;

My package.json with the css-loader (which does not work)

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

(I removed my actual code, but it didn’t work at the beginning either)

When I edit the style with inspect in the browser, it works. Also when I add the style inline it works, for example:

I installed vue with the rails install:webpacker:vue command. When I only created a vue project, it worked just fine, however, this time with vue it seems to not be working and I don’t know why.

I posted the question on stackoverflow as well, but no one answered. css - Vue component style tag NOT scoped not applied in Rails (webpacker) - Stack Overflow

I seriously don’t know the problem. I’d really appreciate help.

SOLUTION: in your config/initializers/content_security_policy.rb, delete whatever is written in there/comment it out.