Vue: webpack is not loading css in production

Question

I am using webpack in Vue+Rails project.

My problem is when i am working in development mode all css works fine but in production the css does,'t loaded as you can see in below image.

as shown in image the css is not loading in webpack

my webpack folder contains these code

environment.js

const webpack = require('webpack')
const { environment } = require('@rails/webpacker')
// const { VueLoaderPlugin } = require('vue-loader')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const vue = require('./loaders/vue')

// environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.plugins.append(
  'VueLoaderPlugin',
  new VueLoaderPlugin()
);
environment.loaders.append('vue', vue)

environment.plugins.append(
  'Globals', // arbitrary name
  new webpack.ProvidePlugin({
    $: 'jquery',
    _: 'underscore'
  })
);

module.exports = environment

vue.js which is for loader the vue.js file is imported in environment.js as const vue = require('./loaders/vue')

vue.js

module.exports = {
      test: /\.vue(\.erb)?$/,
      use: [{
        loader: 'vue-loader',
      }]
    }

and production.js

process.env.NODE_ENV = process.env.NODE_ENV || 'production'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

and package.json file

{
  "dependencies": {
    "@rails/webpacker": "4.2.2",
    "axios": "^0.19.2",
    "ckeditor4-vue": "^0.1.0",
    "deepmerge": "^4.2.2",
    "fibers": "^4.0.2",
    "lodash": "^4.17.15",
    "sass": "^1.25.0",
    "sass-loader": "^8.0.2",
    "vue": "^2.6.11",
    "vue-loader": "^15.8.3",
    "vue-lodash": "^2.1.2",
    "vue-router": "^3.1.5",
    "vue-template-compiler": "^2.6.11",
    "vue-timeago": "^5.1.2",
    "vuetify": "^2.2.10"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

these are the webpack configuration that i have used. as shown is above image the css for webpack is not loading in production. It is working in development but not in production

EDIT:

I run this command then RAILS_ENV=production rails s -p 3000 logs after loading the landing page

=> Booting WEBrick
=> Rails 6.0.3 application starting in production http://0.0.0.0:3000
=> Run `rails server --help` for more startup options
[2020-06-15 19:46:30] INFO  WEBrick 1.4.2
[2020-06-15 19:46:30] INFO  ruby 2.6.3 (2019-04-16) [x86_64-darwin18]
[2020-06-15 19:46:30] INFO  WEBrick::HTTPServer#start: pid=45667 port=3000
127.0.0.1 - - [15/Jun/2020:19:46:34 IST] "GET /login HTTP/1.1" 200 3571
- -> /login
127.0.0.1 - - [15/Jun/2020:19:46:34 IST] "GET /packs/js/application-0ea0a86691fc31d5032d.js HTTP/1.1" 304 0
http://0.0.0.0:3000/login -> /packs/js/application-0ea0a86691fc31d5032d.js
127.0.0.1 - - [15/Jun/2020:19:46:34 IST] "GET /packs/js/application-0ea0a86691fc31d5032d.js.map HTTP/1.1" 304 0
- -> /packs/js/application-0ea0a86691fc31d5032d.js.map

Do you see any errors in your logs? If so, could you post those logs? For example, I've noticed issues when I have <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> in my layout file, but the logs would help us figure out the exact issue — Umar Ghouse
– Umar Ghouse, Commented Jun 15, 2020 at 12:37
@UmarGhouse added logs in the question and i am not using <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> — Dhruvil Dave
– Dhruvil Dave, Commented Jun 15, 2020 at 14:21
Interesting. I don't see any errors - have you tried running it with the stylesheet_pack_tag? — Umar Ghouse
– Umar Ghouse, Commented Jun 16, 2020 at 2:39
I didn't added <%= stylesheet_pack_tag %> in my code. Now it is working. thanks @UmarGhouse — Dhruvil Dave
– Dhruvil Dave, Commented Jun 16, 2020 at 11:43

Dhruvil Dave · Accepted Answer · 2020-06-16 11:45:47Z

1

Added this code in my layout file

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

and it worked. without this the css doesn't not loaded while deployed to production.

answered Jun 16, 2020 at 11:45

Dhruvil Dave

1092 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue: webpack is not loading css in production

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related