Vue CLI Run separate CSS build?

Question

I'm trying to run a completely separate css/sass build to a specific file.

So I have a folder in my src like:

/src
   /sass
      ./index.sass
      ./btn.sass
      ./etc.sass

I'm trying to get it to output to a specific file like "build.css" or whatever which would just end up in the default build directory of "dist" as "dist/build.css".

Been trying to play with vue.config.js and chainWebpack but totally lost here.

Any suggestions how to accomplish this?

Answer 1

One way to do this is to add a Webpack entry that points to the Sass file you want to bundle (using configureWebpack.entry):

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  ?
  configureWebpack: {
    entry: {
      app: './src/main.js',
      extCss: './src/sass/index.sass', ?
    },
  },
})

This has a downside as it also generates a .js file that is effectively a no-op. You'd have to delete that manually as a cleanup step:

dist/css/app.css
dist/css/extCss.css           # CSS bundle of Sass output
dist/js/app.js
dist/js/chunk-vendors.js
dist/js/extCss.js             # no-op file (delete me)

Also delete the <script src="/js/extCss.js"></script> from dist/index.html.