Question

我有一个使用 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 文档所说的。

如何纠正这些错误？

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

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

1 个答案: