#vue.js #webpack #vuejs2 #vue-cli #vue-loader
#vue.js #webpack #vuejs2 #vue-cli #vue-загрузчик
Вопрос:
Я пытаюсь рандомизировать / минимизировать сгенерированные имена классов.
В настоящее время я использую довольно ванильный vue-cli
проект, и я также использую Tailwind css, который, я надеюсь, ничего не усложнит.
В настоящее время это то, как далеко я продвинулся vue.config.js
, прочитав документы vue-loader, это и это, однако это работает только наполовину … мой CSS отлично минимизируется, однако мои классы компонентов vue не меняются, поэтому похоже, что он не анализирует файлы * .vue.
Я подумал, что это может быть потому, что я заметил, что в нем упоминается использование <style scoped>
но с Tailwind вам не нужны теги стилей в ваших компонентах. Буквально 100% css содержится в моем src/assets/styles/main.pcss
файле, который состоит из нескольких @import
инструкций, и это все.
module.exports = {
css: {
requireModuleExtension: false,
loaderOptions: {
css: {
modules: {
localIdentName: '[hash:6]',
},
},
},
},
chainWebpack: config => {
// disable eslint temporarily
config.module.rules.delete('eslint');
},
};
И моей конфигурацией tailwind:
module.exports = {
future: {
purgeLayersByDefault: true,
removeDeprecatedGapUtilities: true,
},
plugins: [],
purge: [
'./src/**/*.html',
'./src/**/*.vue',
],
theme: {},
};
Комментарии:
1. Я считаю, что
localIdentName
это работает только с модулями CSS, т.е.<style module>