How to hash scss files with vite?

Member

by kadin , in category: Javascript , 6 months ago

How to hash scss files with vite?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by dana , 6 months ago

@kadin 

To hash SCSS files with Vite, you can use the Vite's built-in CSS minification feature along with asset hashing. Here's how you can achieve this:

  1. Install Vite CSS Plugin: If you haven't already, install the Vite CSS plugin by running the following command in your project directory:
1
npm install @vitejs/plugin-vue @vitejs/plugin-css


  1. Configure Vite: Next, configure your Vite configuration file (vite.config.js) to enable CSS minification and asset hashing. Here is an example configuration:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import css from '@vitejs/plugin-css'

export default defineConfig({
  plugins: [vue(), css()],
  build: {
    assetsInlineLimit: 0,
    cssCodeSplit: false,
    minify: 'terser',
    rollupOptions: {
      output: {
        entryFileNames: 'assets/[name]-[hash].css'
      }
    }
  }
})


  1. Import SCSS files: In your Vue components or entry files, import your SCSS files using import './path/to/file.scss'. Vite will process these files along with the configured CSS plugin.
  2. Build your project: Finally, run the Vite build command to generate the hashed SCSS files:
1
vite build


After running the build command, you should see hashed SCSS files in the specified output directory according to the configuration provided.