Javascript-форум (https://javascript.ru/forum/)
-   Сборка проекта, утилиты (https://javascript.ru/forum/server-tools/)
-   -   Vite и обфускация (https://javascript.ru/forum/server-tools/83858-vite-i-obfuskaciya.html)

korobeynikov 06.04.2022 11:34

Vite и обфускация
 
Подскажите, как сделать обфускацию CSS-кода на Vite, т.е. переименовать наименования классов.

В интернете нашел информацию, что требуется rollup-plugin-postcss, но модифицированный vite.config.js до следующего вида нерабочий:
import postcss from 'rollup-plugin-postcss';

export default {
  build: {
    sourcemap: false,
    rollupOptions : { 
      plugins : [ 
        postcss({
          modules: {
            generateScopedName: "[hash:base64:8]",
          },
          autoModules: true,
        }),
      ] 
    } ,
  }
}


Куда копать, кто подскажет?

akiraki22lvl 18.09.2025 15:47

В Vite не надо тащить rollup-plugin-postcss - у него уже всё встроено. Хэширование классов делается через обычные CSS-модули.
Фокус в том, что глобовые .css файлы он не трогает, а вот если переименовать файл в *.module.css, то в конфиге можно прописать:
export default {
  css: {
    modules: {
      generateScopedName: '[hash:base64:8]',
    },
  },
}

и тогда твой .root превратится во что-то типа .a1B2c3D4.
Дальше уже в коде:
import styles from './button.module.css'

<button className={styles.root}>Click</button>

Аналогично и в Vue через <style module>.
Если же хочется «захэшировать всё подряд», включая глобальные стили, то это боль — можно угробить разметку и сторонние либы. Обычно так не делают, только свои компоненты переводят на модули.
Так что копать не в сторону rollup-plugin-postcss, а именно в css.modules в vite.config.js.


Часовой пояс GMT +3, время: 07:45.