Logo Questions Linux Laravel Mysql Ubuntu Git Menu

@apply not working inside Vue component in Laravel Mix

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





<style lang="postcss" scoped>

    .day-disabled {

        @apply text-gray-400;


However it is complaining that

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;

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', [

Is there anyway to resolve this issue.

like image 268
nicholasnet Avatar asked Mar 04 '23 04:03


1 Answers

It seems this may be a bug in Laravel Mix, see this issue.

Try adding the following to your Mix config (source):

  module: {
    rules: [
        test: /\.(postcss)$/,
        use: [
          { loader: 'css-loader', options: { importLoaders: 1 } },
like image 160
Sara Avatar answered Mar 07 '23 09:03