@apply 在 Laravel Mix 的 Vue 组件中不起作用答案

【问题标题】：@apply not working inside Vue component in Laravel Mix@apply 在 Laravel Mix 的 Vue 组件中不起作用
【发布时间】：2020-03-09 21:55:37
【问题描述】：

我在 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;

有没有在使用 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')
   ]);

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

【问题讨论】：

你是否在 Vue 中使用单文件组件，你可能还需要 vue-loader。错误是关于.day-disabled 而不是@apply
我有。如果我删除 @apply 一切正常。
对 postcss 不是很熟悉，但你的混音选项中是否需要 require('postcss-apply')？
我不确定。但假设我不需要这个，因为它适用于 Vue 组件之外的 CSS。

标签： laravel vue.js webpack laravel-mix tailwind-css

【解决方案1】：

如果您还没有postcss.config.js文件，请确保创建一个postcss.config.js文件并将这个sn-p粘贴到里面

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] : []
    ]
}

这里是来源[https://github.com/JeffreyWay/laravel-mix/issues/2312]

【讨论】：

确认适用于 Laravel Mix 7 + Vue 3 + Tailwind 2.0

【解决方案2】：

这似乎是 Laravel Mix 中的一个错误，请参阅 this issue。

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

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

【讨论】：

为了使其正常工作，您还需要使用 tailwind 团队提供的代码在根文件夹中创建一个名为 postcss.config.js 的 postcss 配置文件。 read more