How to hash scss files with vite?

@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.