Laravel-mix: PostCSS in Vue single file component style block not compiling

[Vercoutere]

• Laravel Mix Version: 4.1.2
• Node Version: 10.16.3
• NPM Version: 6.11.2
• OS: MacOS Mojave (10.14.6)

Description:

I have a pretty simple application with up to date versions of all dependencies.
Everything worked flawlessly until I tried using the tailwind @apply directive in a Vue component's style block.

I was under the impression PostCSS would just work in Vue components when using Laravel Mix. However, an error is thrown and the build fails.

When I run npm run dev, this is the console output:

ERROR in ./resources/assets/js/app/components/forms/Wysiwyg.vue?vue&type=style&index=0&lang=postcss& (./node_modules/vue-loader/lib??vue-loader-options!./resources/assets/js/app/components/forms/Wysiwyg.vue?vue&type=style&index=0&lang=postcss&) 69:0
Module parse failed: Unexpected token (69: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.
| 
| 
> .editor__content p.is-empty:first-child::before {
|     content: attr(data-empty-text);
|     float: left;
 @ ./resources/assets/js/app/components/forms/Wysiwyg.vue?vue&type=style&index=0&lang=postcss& 1:0-146 1:162-165 1:167-310 1:167-310
 @ ./resources/assets/js/app/components/forms/Wysiwyg.vue
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/assets/js/app/views/Dashboard.vue?vue&type=script&lang=js&
 @ ./resources/assets/js/app/views/Dashboard.vue?vue&type=script&lang=js&
 @ ./resources/assets/js/app/views/Dashboard.vue
 @ ./resources/assets/js/app/routing/routes.js
 @ ./resources/assets/js/app/routing/router.js
 @ ./resources/assets/js/app/app.js
 @ multi ./resources/assets/js/app/app.js ./resources/assets/css/app/app.css

Steps To Reproduce:

These are the contents of my webpack.mix.js file:

const mix = require('laravel-mix');

mix.setPublicPath('public/app')
    .js('resources/assets/js/app/app.js', 'public/app/js')
    .postCss('resources/assets/css/app/app.css', 'public/app/css', [
        require('tailwindcss'),
    ])

if (mix.inProduction()) {
    mix.extract().version();
}

These are the contents of my Vue component that's tripping everything up:

<template>
<div>
</div>
</template>

<script>
export default {

}
</script>

<style lang="postcss">
.editor__content p.is-empty:first-child::before {
    content: attr(data-empty-text);
    float: left;
    @apply italic font-bold text-blue;
}
</style>

[clmntgr]

I have exactly the same issue, I tried adding .options() with my postcss plugins but didn't work

[peterhollis]

I'm experiencing the same issue too.

[innocenzi]

I have this same issue.

[innocenzi]

I fixed it by adding this rule to webpack.mix.js:

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

I also upgraded to 5.0.0.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[IsidroMar95]

I fixed it by adding this rule to webpack.mix.js:

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

I also upgraded to 5.0.0.

where did you put that code or how can i fix? i'm facing the same problem

[marcamos]

@IsidroMar95 You can add it to your config (in webpack.mix.js) like so: https://laravel-mix.com/docs/5.0/quick-webpack-configuration