Laravel-mix: [4.0.12] Parse error of scoped postcss (tailwind) in .vue

[tplesnar]

• Laravel Mix Version: 4.0.12
• Node Version: v10.4.1
• NPM Version: 6.1.0
• OS: Ubuntu 16.04.3 LTS

Description:

When compiling this webpack.mix.js:

const mix = require("laravel-mix");
const tailwindcss = require("tailwindcss");

mix.js("resources/js/app.js", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .options({
        processCssUrls: false,
        postCss: [tailwindcss("./tailwind.js")],
    });

const rootPath = __dirname + "/resources";

mix.webpackConfig({
    watchOptions: {
        poll: 500,
    },
    resolve: {
        extensions: [".js", ".vue", ".json"],
        alias: {
            "@": __dirname,
            "@resources": rootPath,
            "@js": rootPath + "/js",
            "@router": rootPath + "/js/router",
            "@views": rootPath + "/js/router/views",
            "@layouts": rootPath + "/js/router/layouts",
            "@components": rootPath + "/js/components",
            "@store": rootPath + "/js/store",
        },
    },
});

I get this compilation error:

[...]
Asset      Size   Chunks             Chunk Names
/css/app.css   396 KiB  /js/app  [emitted]  /js/app
  /js/app.js  2.05 MiB  /js/app  [emitted]  /js/app

ERROR in ./resources/js/components/_base-button.vue?vue&type=style&index=0&id=8695278c&scoped=true&lang=postcss& (./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/_base-button.vue?vue&type=style&index=0&id=8695278c&scoped=true&lang=postcss&) 11:0
Module parse failed: Unexpected token (11:0)
You may need an appropriate loader to handle this file type.
|
|
> .btn {
|     @apply flex-no-shrink bg-teal border-teal text-sm border-4 text-white py-1 px-2 rounded;
| }
 @ ./resources/js/components/_base-button.vue?vue&type=style&index=0&id=8695278c&scoped=true&lang=postcss& 1:0-166 1:182-185 1:187-350 1:187-350
 @ ./resources/js/components/_base-button.vue
 @ ./resources/js/components sync nonrecursive _base-[\w-]+\.vue$
 @ ./resources/js/components/_globals.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss
[...]

And all other vue files using postcss. Fix made for #1871 doesn't seem to help here.

My _base-button.vue

<template>
    <button
        class="btn"
        v-on="$listeners"
    >
        <slot />
    </button>
</template>

<style scoped lang="postcss">
.btn {
    @apply flex-no-shrink bg-teal border-teal text-sm border-4 text-white py-1 px-2 rounded;
}

.btn:hover {
    @apply bg-teal-dark border-teal-dark;
}
</style>

Steps To Reproduce:

This setting was I'm using the .vue modules loading pattern described here https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/components/_globals.js . This configuration was perfectly compiling under laravel-mix 2 .

[elivz]

Same problem here. Did anyone ever figure out a solution?

[caneco]

Same here…

Still no solution?

[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.