vue.config.js customize for Scss outputs

Question

we have 3 sections on our website (site, panel, admin). we have one npm run serve to run all of them. in local all of the things are true but when we build the application and upload that on the server all of the CSS has been mix and we have CSS of admin for the site! that is not true and causes some conflict. while we have a specific main.js file for each section

module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: './src/pages/site/main.js',
      // the source template
      template: 'public/index.html',
      // output as dist/index.html
      filename: 'index.html',
      // when using title option,
      // template title tag needs to be <%= htmlWebpackPlugin.options.title %>
      title: 'Site',
      // chunks to include on this page, by default includes
      // extracted common chunks and vendor chunks.
      // chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    panel: {
      // entry for the page
      entry: './src/pages/panel/main.js',
      // the source template
      template: 'public/panel.html',
      // output as dist/index.html
      filename: 'panel.html',
      // when using title option,
      // template title tag needs to be <%= htmlWebpackPlugin.options.title %>
      title: 'Panel',
      // chunks to include on this page, by default includes
      // extracted common chunks and vendor chunks.
      // chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    admin: {
      // entry for the page
      entry: './src/pages/admin/main.js',
      // the source template
      template: 'public/admin.html',
      // output as dist/index.html
      filename: 'admin.html',
      // when using title option,
      // template title tag needs to be <%= htmlWebpackPlugin.options.title %>
      title: 'Admin',
      // chunks to include on this page, by default includes
      // extracted common chunks and vendor chunks.
      // chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
  },
  publicPath: '/',
  // filenameHashing: false,
  productionSourceMap: false,
  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /\/index/, to: '/index.html' },
        { from: /\/panel/, to: '/panel.html' },
        { from: /\/admin/, to: '/admin.html' },
      ]
    },
    proxy: {
      "/api": {
        target: process.env.VUE_APP_BASE_URL,
        secure: false
      }
    }
  },
  chainWebpack: (config) => {
    // Disable prefetching and preloading
    config.plugins.delete('prefetch')
    config.plugins.delete('preload')
  },
 
};

how can we separate built CSS files for each section?

vue.config.js customize for Scss outputs

0 Answers