Laravel 混合 6.0.25 不构建 @tailwindcss/jit

Question

我试图在使用 Vue Laravel Mix 的 Laravel 项目中用 @tailwindcss/jit 替换 Tailwindcss 编译器，但我收到了这个未知单词错误。

✖ Mix Compiled with some errors in 489.07ms

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) /Users/username-76/Desktop/projectname/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??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 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details) webpack compiled with 2 errors

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: {
    }
}

Laravel 混合 6.0.25 不构建 @tailwindcss/jit

Laravel Mix 6.0.25 not building with @tailwindcss/jit

jit

laravel

webpack

laravel-mix

tailwind-css