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,
}),
]
} ,
}
}
Куда копать, кто подскажет? |
В 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, время: 13:04. |