VueCLI + Webpack : I need a separate css file from a single scss

2
votes

I'm building an app with VueCLI and webpack. My app has the usual main main.js with vue components and scss assets compiling as expected to global .js and .css files.

But I also need to have a single example.scss file in my /src directory that compiles to a separate example.css file in a specific directory.

Here's my /src directory structure

/src
- /assets
-- /scss
--- index.scss
--- _import1.scss
--- _import2.scss
--- example.scss
- /components
-- ... my vue components sit here
- main.js
- App.vue

What I want in the /dist directory:

/dist
- /css
-- index.hash.css
-- example.hash.css
- /js
-- index.hash.js
- index.html

How can I configure the vue.config.js file, with a custom webpack config (https://cli.vuejs.org/guide/webpack.html#simple-configuration), to enable the export of the separate example.css file ?

thank you.

1
vue.jswebpackvue-clivue-cli-3

1 Answers

3
votes

You can add another entry point which will build it separately\

vue.config.js

  chainWebpack: config => {
    config.entry('example')
      .add('./src/example.scss')
      .end()
  }