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

Posted 2023-03-07

【中文标题】使用“postcss”预处理器构建代码时发生编译错误

【英文标题】：Compilation errors occur when building code with "postcss" preprocessor

【发布时间】：2021-06-11 06:08:07

【问题描述】：

我有一个使用 laravel 8 的新项目。

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

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

然后在执行 npm run watch 命令期间编译代码不会出错。

但如果我将预处理器更改为在 webpack.mix.js 中发布“postcss”

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:\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

但我需要在我的项目“Tailwindcss”中包含它需要“postcss”预处理器。这就是 Tailwindcss 文档所说的。

可以做些什么来纠正这些错误？

【问题讨论】：

你有没有尝试过这样的事情：.sass('resources/sass/app.scss', 'public/css', [ require("tailwindcss"), ]);？

@RobBiermann 是的，我试着按照你说的做，但它给出了同样的错误。

【参考方案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();