VUE build for production does not apply CSS

Question

I have purchased this VUE template. From its documentation, if I run npm run install && npm run dev. It looks correct

When I execute npm run build to get my production ready project. As you can see, it does not look the same:

I have checked the css links inside of the generated HTML, and there is only one pointing to "a file". I believe is the right one...(?)

Here is vue.config.js:

module.exports = {

  publicPath: process.env.NODE_ENV === 'production' ? './' : './',
  outputDir: 'dist',
  assetsDir: 'app',
  indexPath: 'index.html',
  configureWebpack: {
    devtool: 'source-map'
  },

}

My env.production looks like:

NODE_ENV=production
VUE_APP_TITLE=My Base Front End

What am I missing on the config file?

Open the browser console and check for errors. It has to be a path issue. Check if the browser is giving errors about loading files in the console — Chin. Udara, Jun 05 '21 at 18:08

score 0 · Answer 1 · answered Jun 06 '21 at 10:25

0

Try adding below code for tag stylesheet_pack_tag in your layout file :

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

I can recall similar issue from past experience.

answered Jun 06 '21 at 10:25

Tarun

685
3
16

score 0 · Answer 2 · answered Jul 27 '23 at 10:46

Had the same problem, in the local env it was applying but not in production.

In my case the problem was that the lang of the style was not specified as scss, modifying it to

<style lang="scss" scoped>

fixed the issue (although it's still odd it worked in the local env)

VUE build for production does not apply CSS

2 Answers2