在 Laravel 中的 Vue 组件无法使用 @apply 的解决方案

前写时间在写项目的时候使用到了 tailwindcss，该框架使用 PostCSS 作为预处理器，然而在使用 tailwindcss 的 @apply 方法时编译器出现了错误。

我的配置如下：

• laravel 8.4
• vue 3.0.11
• postcss 8.3
• tailwindcss 2.0.2

解决方案

这似乎是因为没有 postcss.config.js 文件造成的（在 tailwindcss 的官方安装方法里并没有这个在 Laravel 中安装 TailwindCSS），最终在 laravel-mix 的 GitHub 上找到了解决方案。
创建一个 postcss.config.js 文件在项目根目录中

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
  ],
  whitelistPatterns: [ /-(leave|enter|appear)(|-(to|from|active))$/, /data-v-.*/, /v-deep/ ],
  whitelistPatternsChildren: [ /pretty$/, /xmx-.*$/, /^(.*?)\.tooltip/ ],
  defaultExtractor: content => content.match(/[\w-/.:]+(?<!:)/g) || []
})

module.exports = {
  plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
      //...process.env.NODE_ENV === 'production' ? [purgecss] : []
  ]
}

请注释掉最后的生产优化，启用的话会导致预设的生产优化不起作用

然后将以下代码加入到你的 mix 配置中

.webpackConfig({
  module: {
    rules: [
      {
        test: /\.(postcss)$/,
        use: [
          'vue-style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ]
      }
    ],
  },
})

这样就可以成功编译了