css for two layouts (Front and Admin) not working in production mode

1
votes

I'm new in vue js. I set up new vue project using vue cli and also choose template webpack. My project has two parts : Frontend and Admin panel. Both have different templates. So, i give route meta "backend" for all backend components. I added all css by following logic in main.js

if (to.matched.some(record => record.meta.backend)) {
   require('../static/backend.css')
   next()
  } else {
    require('../static/frontend.css')
    next()
  }
})

When i run "npm run dev" command , all css works perfectly, But when i run "npm run build" command, all css merged in one file. So my backend css override on frontend.

Please give me any solution for that.

Thanks

1
csswebpackvuejs2productionvue-cli

1 Answers

0
votes

I see how to do it in single page mode, if you like to have js, css and html files:

Frontend.vue :

<style scoped  lang="css" src="../static/frontend.css"></style>
<template src='./frontend.html'></template>
<script src='./frontend.js'></script>

Backend.vue :

<style scoped  lang="css" src="../static/backend.css"></style>
<template src='./backend.html'></template>
<script src='./backend.js'></script>

but most of the time, css, template and js are inside the single page.

Then you can use vue-router or dynamic-async components to charge backend or frontend...

If you want to stick to your organization (which I don't know). With webpack4 you can chunk your js in separate files :

But I don't think it will be enough, you might need to use a promise to set the css dynamically :

() => import('./../static/backend.css')