vue.js - 如何在 vue-cli 中使用`localIdentName`

Question

我正在尝试随机化/缩小生成的类名。

目前我正在使用一个相当普通的vue-cli项目，并且我也在使用 Tailwind css，我希望它不会使任何事情复杂化。

目前，这就是我vue.config.js通过阅读 vue-loader 文档、this和this所取得的进展，但是这只能工作一半......我的 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');
  },
};

还有我的顺风配置：

module.exports = {
  future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
  plugins: [],
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
  ],
  theme: {},
};

标签： vue.jswebpackvuejs2vue-clivue-loader