@应用不在Laravel Mix中的Vue组件内部工作

我在Laravel中使用Tailwind CSS和VueJS组件，如下所示

<template>

</template>

<script>

</script>

<style lang="postcss" scoped>

    .day-disabled {

        @apply text-gray-400;
    }

</style>

在使用Laravel Mix的VueJS组件中，是否仍然可以使用

@apply

指令。这是我的

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')
   ]);

---

是否仍有解决此问题的方法。

似乎这可能是Laravel Mix中的一个错误，请参阅

尝试将以下内容添加到混合配置（）：

---

要使上述答案有效，请确保创建一个

postsss.config.js

文件（如果您还没有），并将此代码片段粘贴到其中

const purgecss = require('@fullhuman/postcss-purgecss')({
    content: [
        './resources/**/*.vue',
        './resources/**/*.js'
    ],
    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] : []
    ]
}

const purgecss=require（“@fullhuman/postcss purgecss”）({
内容：[
“./resources/***.vue”，
“./resources/***.js”
],
白名单模式：[/-（离开|输入|出现）（|-（到|从|激活））$/，/data-v-.*/，/v-deep/]，
whitelistPatternsChildren:[/pretty$/，/xmx-.*$/，/^（.*？\）。工具提示/]，
defaultExtractor:content=>content.match（/[\w-/.：]+（？）？
这是源代码
如果您在Vue中使用单文件组件，您可能还需要Vue加载程序。错误是关于
。日间禁用的
不是
@apply
我有。如果我删除了@apply everything works。不太熟悉POSTSS，但您需要
require（'postsss-apply'）吗
在您的混合选项中？我不确定。但假设我不需要它，因为它适用于Vue组件之外的CSS。为了正确工作，您还需要使用tailwind团队提供的代码在根文件夹中创建一个名为postss.config.js的postsss配置文件。已确认适用于Laravel mix 7+Vue 3+T东风2.0
.webpackConfig({
  module: {
    rules: [
      {
        test: /\.(postcss)$/,
        use: [
          'vue-style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ]
      }
    ],
  },
})

const purgecss = require('@fullhuman/postcss-purgecss')({
    content: [
        './resources/**/*.vue',
        './resources/**/*.js'
    ],
    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] : []
    ]
}