使用"postcss"预处理器构建代码时发生编译错误

Question

我有一个带有laravel 8的新项目。

如果我在webpack.mix.js文件中使用sass预处理器：

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

然后在npm运行监视命令执行期间对代码进行编译，不会出现错误。

但是如果我把预处理器改为post"；邮政编码"；在webpack.mix.js 中

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

编译过程中出现错误。

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:Userswebgrlaravel-devvue.locresourcessassapp.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:Userswebgrlaravel-devvue.locnode_moduleswebpacklibNormalModule.js:598:19)
at C:Userswebgrlaravel-devvue.locnode_moduleswebpacklibNormalModule.js:692:5
at C:Userswebgrlaravel-devvue.locnode_modulesloader-runnerlibLoaderRunner.js:399:11
at C:Userswebgrlaravel-devvue.locnode_modulesloader-runnerlibLoaderRunner.js:251:18
at context.callback (C:Userswebgrlaravel-devvue.locnode_modulesloader-runnerlibLoaderRunner.js:124:13)
at Object.loader (C:Userswebgrlaravel-devvue.locnode_modulespostcss-loaderdistindex.js:94:7)
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors

但我需要在我的项目中加入"；顺风css"它需要"；邮政编码"；预处理器。这就是Tailwindcss文档中所说的。

如何纠正这些错误？

Answer 1

在代码中进行了一点挖掘后，我找到了该做什么，并通过如下更改webpack.mix.js解决了这个问题

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();