Блог

Я пытаюсь рандомизировать / минимизировать сгенерированные имена классов.

В настоящее время я использую довольно ванильный 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: {},
};