Compilation errors occur when building code with "postcss" preprocessor

Question

I have a new project with laravel 8.

If I use the sass preprocessor in the webpack.mix.js file:

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

then the compilation of the code during the execution of the npm run watch command proceeds without errors.

but if I change the preprocessor to post "postcss" in webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/sass/app.scss', 'public/css');

errors occur during compilation.

ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(1:1) C:\Users\webgr\laravel-dev\vue.loc\resources\sass\app.scss Unknown word

> 1 | import api from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    | ^
  2 |             import content from "!!../../node_modules/css-loader/dist/cjs.js??clonedRuleSet-12[0].rules[0].use[1]!../../node_modules/postcss-loade
r/dist/cjs.js??clonedRuleSet-12[0].rules[0].use[2]!../../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-12[0].rules[0].use[3]!./app.scss";
  3 | 

    at processResult (C:\Users\webgr\laravel-dev\vue.loc\node_modules\webpack\lib\NormalModule.js:598:19)
    at C:\Users\webgr\laravel-dev\vue.loc\node_modules\webpack\lib\NormalModule.js:692:5
    at C:\Users\webgr\laravel-dev\vue.loc\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at C:\Users\webgr\laravel-dev\vue.loc\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (C:\Users\webgr\laravel-dev\vue.loc\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.loader (C:\Users\webgr\laravel-dev\vue.loc\node_modules\postcss-loader\dist\index.js:94:7)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors

But I need to include in the my project "Tailwindcss" it needs the "postcss" preprocessor. This is what the Tailwindcss documentation says.

What can be done to correct these errors?

Have you tried something like this: .sass('resources/sass/app.scss', 'public/css', [ require("tailwindcss"), ]);? — Techno
– Techno, Commented Mar 13, 2021 at 18:52
@RobBiermann Yes, I tried to do what you said, but it gives the same error. — webgrig
– webgrig, Commented Mar 14, 2021 at 8:12

webgrig · Accepted Answer · 2021-03-19 14:31:58Z

1

After a little digging in the code, I figured out what to do and I solved this problem by changing webpack.mix.js as follows

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/dashboard/app.js', 'public/js/dashboard')
    .vue()
    .sass('resources/sass/app.scss', 'public/css')
    .sass('resources/sass/dashboard/app.scss', 'public/css/dashboard')
    .postCss('resources/css/dashboard/app.css', 'public/css/dashboard', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
])
    .sourceMaps();

answered Mar 19, 2021 at 14:31

webgrig

592 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Compilation errors occur when building code with "postcss" preprocessor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related