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

Question

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.

lthh89vt · Accepted Answer · 2021-01-12 22:45:38Z

4

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

vue.config.js

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

answered Jan 12, 2021 at 22:45

lthh89vt

1645 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related