@apply无法在Laravel Mix中的Vue组件内部工作

问题描述

我正在Laravel和VueJS组件中使用Tailwind CSS.

I am using Tailwind CSS in Laravel with VueJS component like this.

<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

Is there anyway to use @apply directive in VueJS component using Laravel Mix. This is my 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')
   ]);

反正有解决此问题的方法.

Is there anyway to resolve this issue.

推荐答案

要使上述答案起作用，请确保创建一个 postcss.config.js 文件(如果尚未创建)，并且将此片段粘贴到内部

For the above answer to work make sure to create a postcss.config.js file if you don't have it already and paste this snippet inside

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]

这篇关于@apply无法在Laravel Mix中的Vue组件内部工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！