laravel - @apply 在 Laravel Mix 中的 Vue 组件中不起作用

Question

我在 Laravel 中使用 Tailwind CSS 和这样的 VueJS 组件。

<template>

</template>

<script>

</script>

<style lang="postcss" scoped>

    .day-disabled {

        @apply text-gray-400;
    }

</style>

然而，它提示说

Module parse failed: Unexpected token (685:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> .day-disabled {
|
|     @apply text-gray-400;

反正有没有用 @apply使用 Laravel Mix 的 VueJS 组件中的指令。这是我的 webpack.mix.js

const mix = require('laravel-mix');
mix.options({ extractVueStyles: true})
   .js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
       require('postcss-import'),
       require('tailwindcss'),
       require('postcss-nested'),
       require('postcss-custom-properties'),
       require('autoprefixer')
   ]);

有没有办法解决这个问题。

Answer 1

看来这可能是 Laravel Mix 中的一个错误，见 this issue .

尝试将以下内容添加到您的 Mix 配置 ( source ):

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