HELP How to output (compiled/unhashed/unminified) style.css file for inspection? #3278

ldexterldesign · 2021-05-06T00:44:26Z

ldexterldesign
May 6, 2021

Hi!

I'm using /style.scss for development

I see Vite outputs /dist/style.css for production but I wish to create /style.css in development so I can see my (uncompressed) SCSS>CSS code or at a minimum configure an uncompressed production /dist/style.css

What's the best way to set this up (e.g. vite.config.js, rollup.config.js, postcss.config.js or somewhere else)?

Hope to hear back

Sincerely

Answered by ldexterldesign

May 11, 2021

// vite.config.js

module.exports = {
  build: {
    minify: false,
    rollupOptions: {
      output: {
        assetFileNames: "[name].[ext]",
      },
    },
  },
};

npx vite build --watch

Will output unhashed assets:

dist
├── assets
│   ├── favicon.17e50649.svg
│   └── index.b3c5dece.js
├── index.css
└── index.html

This is useful if you want to inspect your compiled CSS file

Hope this helps!

Regards

View full answer

ldexterldesign · 2021-05-06T13:29:32Z

ldexterldesign
May 6, 2021
Author

I suppose a simpler question here is how does one generate a compiled /style.css file during development, in addition to the inlined CSS served in <style> tags to the browser and/or (cached) /dist/style.css for production?

0 replies

ldexterldesign · 2021-05-11T01:51:07Z

ldexterldesign
May 11, 2021
Author

// vite.config.js

module.exports = {
  build: {
    minify: false,
    rollupOptions: {
      output: {
        assetFileNames: "[name].[ext]",
      },
    },
  },
};

npx vite build --watch

Will output unhashed assets:

dist
├── assets
│   ├── favicon.17e50649.svg
│   └── index.b3c5dece.js
├── index.css
└── index.html

This is useful if you want to inspect your compiled CSS file

Hope this helps!

Regards

0 replies

ldexterldesign · 2021-05-11T02:00:40Z

ldexterldesign
May 11, 2021
Author

Hi @yyx990803,

This was a very time consuming problem for a Vite beginner, like myself, to solve

I think the guide should contain more about how the CSS is bundled (e.g. Rollup and other Node processes, PostCSS)

If you agree this is a common task then please consider adding something to docs/guide

Happy to start a PR

Sincerely

1 reply

alamin3000 Aug 3, 2022

Ya I agree. This is specially useful for those who are trying to use vuejs in their existing projects, like php/python etc. I spent hours until I came across this thread. Thanks.

Rogan73 · 2022-10-25T11:02:34Z

Rogan73
Oct 25, 2022

// vite.config.js

export default defineConfig({
    build: {
        minify: false,
        rollupOptions: {
            output: {
                assetFileNames: "assets/[name].[ext]",
                entryFileNames: "assets/[name].js",
                chunkFileNames: "assets/[name].js",
            },
        },
    },
})

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HELP How to output (compiled/unhashed/unminified) style.css file for inspection? #3278

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

HELP How to output (compiled/unhashed/unminified) style.css file for inspection? #3278

ldexterldesign May 6, 2021

Replies: 4 comments · 1 reply

ldexterldesign May 6, 2021 Author

ldexterldesign May 11, 2021 Author

ldexterldesign May 11, 2021 Author

alamin3000 Aug 3, 2022

Rogan73 Oct 25, 2022

ldexterldesign
May 6, 2021

Replies: 4 comments 1 reply

ldexterldesign
May 6, 2021
Author

ldexterldesign
May 11, 2021
Author

ldexterldesign
May 11, 2021
Author

Rogan73
Oct 25, 2022