两种布局（前台和管理员）的 css 在生产模式下不起作用答案

【问题标题】：css for two layouts (Front and Admin) not working in production mode两种布局（前台和管理员）的 css 在生产模式下不起作用
【发布时间】：2018-04-25 14:16:05
【问题描述】：

我是 vue js 的新手。我使用 vue cli 设置了新的 vue 项目，还选择了模板 webpack。我的项目有两个部分：前端和管理面板。两者都有不同的模板。因此，我为所有后端组件提供路由元“后端”。我按照 main.js 中的逻辑添加了所有 css

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

当我运行“npm run dev”命令时，所有 css 都可以正常工作，但是当我运行“npm run build”命令时，所有 css 都合并到一个文件中。所以我的后端css覆盖在前端。

请给我任何解决方案。

谢谢

【问题讨论】：

标签： css webpack vuejs2 production vue-cli

【解决方案1】：

如果你喜欢 js、css 和 html 文件，我知道如何在单页模式下进行操作：

前端.vue：

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

后端.vue：

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

但大多数时候，css、模板和js都在单个页面内。

那你就可以用vue-router或者dynamic-async组件来给后端或者前端充电了……

https://vuejs.org/v2/guide/routing.html路由器
https://vuejs.org/v2/guide/components-dynamic-async.html动态异步

如果你想坚持你的组织（我不知道）。使用 webpack4，您可以将 js 分块到单独的文件中：

https://webpack.js.org/guides/code-splitting/

但我认为这还不够，您可能需要使用 promise 来动态设置 css：

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

【讨论】：