Laravel Mix 6.0.25 未使用 @tailwindcss/jit 构建

Question

我正在尝试在一个使用 Vue Laravel Mix 的 Laravel 项目中用 @tailwindcss/jit 替换 Tailwindcss 编译器，但我收到了这个 Unknown word 错误。

✖ 混合 在 489.07ms 编译时出现一些错误

./resources/sass/app.scss 中的错误 模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）： ModuleBuildError：模块构建失败（来自 ./node_modules/postcss-loader/dist/cjs.js）： 语法错误

(1:1) /Users/username-76/Desktop/projectname/resources/sass/app.scss 未知字

1 |从“！../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js”导入api； | ^ 2 |从“!!../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[1]!../.. /node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].oneOf[1].use[2]!../../node_modules/sass-loader/dist/cjs。 js??ruleSet[1].rules[6].oneOf[1].use[3]!./app.scss"; 3 |

at processResult (/Users/username-76/Desktop/projectname/node_modules/webpack/lib/NormalModule.js:701:19)
at /Users/username-76/Desktop/projectname/node_modules/webpack/lib/NormalModule.js:807:5
at /Users/username-76/Desktop/projectname/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /Users/username-76/Desktop/projectname/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/Users/username-76/Desktop/projectname/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/Users/username-76/Desktop/projectname/node_modules/postcss-loader/dist/index.js:140:7)

子编译中的 1 个错误（使用 'stats.children: true' 和 '--stats-children' 了解更多详细信息） webpack 编译时出现 2 个错误

app.scss

/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */
  
@tailwind utilities;

html, body {
    @apply font-sans;
    @apply text-darkblue;
}

webpack.mix.js

const mix = require('laravel-mix');
 
mix.disableSuccessNotifications();

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

mix.postCss("resources/sass/app.scss", "public/css", [
    require("@tailwindcss/jit"),
  ]);

mix.version();

Answer 1

您正在使用 PostCSS 插件，但您正在尝试编译 SASS。请改用以下方式。

.postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss')
    ])
.options({
    postCss: [ tailwindcss('./tailwind.config.js') ],
})

您的 app.css 将包含 Tailwind：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

然后在您的tailwind.config.js 中将包含just-in-time 模式。

module.exports = {
    mode: 'jit',
    /* These paths are just examples, customize 
       them to match your project structure
    */
    purge: [
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    theme: {
    }
}