使用 Laravel 的 Tailwind CSS 无法再使用 Sass 找到导入答案

【问题标题】：Tailwind CSS with Laravel cannot find import anymore with Sass使用 Laravel 的 Tailwind CSS 无法再使用 Sass 找到导入
【发布时间】：2021-09-09 05:22:29
【问题描述】：

我一直在我的 Laravel 项目中使用下面的这种方法，但由于某种原因，从这个月开始，它现在给我这个错误，它在控制台中中断并给我一个错误。不过，与.postCss 相同的代码可以正常工作，没有任何问题，而且我可以在我的页面上完美地使用 Tailwind。只有当我使用.sass 时才会发生这种情况。

当我运行npm run watch 时，它给我一个错误，它无法读取顺风的导入。我已经尝试重新安装 node-sass，现在使用 4.14.1 的版本，但这仍然不能解决问题。我试图在网上找到这个错误，但我找不到解决办法。任何帮助都会很棒。

webpack.mix.js

mix.sass('resources/sass/main.scss', 'public/css', [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
]);

main.scss

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

错误

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


^
      File to import not found or unreadable: tailwindcss/base.

【问题讨论】：

标签： laravel tailwind-css

【解决方案1】：

使用 PostCSS 插件安装 Tailwind CSS 是使用 Tailwind 的正确方法。通过将 SASS 与 PostCSS 分开，以下方法会更好。

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('autoprefixer'),
        require('postcss-import'),
        require('tailwindcss'),
    ])
    .sass('resources/sass/main.scss', 'public/css');

app.css

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

【讨论】：