Tailwind - Laravel Mix - 找不到模块：错误：无法解析 scss 文件答案

【问题标题】：Tailwind - Laravel Mix - Module not found: Error: Can't resolve scss fileTailwind - Laravel Mix - 找不到模块：错误：无法解析 scss 文件
【发布时间】：2020-06-27 00:31:03
【问题描述】：

我正在尝试将 Tailwind 安装到我的 Laravel 5.8 应用程序中，并且正在使用 Laravel Mix。我已经安装了 tailwind npm 包并生成了一个 tailwind 配置文件。 resources/sass/app.scss 路径中存在一个文件，但是当我使用 npm run watch 进行编译时，我收到一个错误，提示找不到依赖项。如何解决这个问题并在我的 Laravel 5.8 项目中使用 Tailwind？

 ERROR  Failed to compile with 1 errors                              12:16:17 PM

This dependency was not found:

* /Users/connorleech/Projects/employbl/resources/sass/app.scss in multi ./resources/assets/js/app.js ./resources/sass/app.scss

To install it, you can run: npm install --save /Users/connorleech/Projects/employbl/resources/sass/app.scss
     Asset     Size  Chunks                    Chunk Names
/js/app.js  2.37 MB       0  [emitted]  [big]  /js/app

ERROR in multi ./resources/assets/js/app.js ./resources/sass/app.scss
Module not found: Error: Can't resolve '/Users/connorleech/Projects/employbl/resources/sass/app.scss' in '/Users/connorleech/Projects/employbl'
 @ multi ./resources/assets/js/app.js ./resources/sass/app.scss

这是我的 webpack.mix.js 文件：

let mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

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


mix.sass('resources/sass/app.scss', 'public/css')
.options({
  processCssUrls: false,
  postCss: [ tailwindcss('./tailwind.config.js') ],
});

这些是我的 package.json 中的依赖项：

    "devDependencies": {
        "axios": "^0.16.2",
        "bootstrap": "^4.1.1",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.0.1",
        "jquery": "^3.1.1",
        "laravel-mix": "^1.0",
        "lodash": "^4.17.11",
        "popper.js": "^1.14.3",
        "sass-loader": "^8.0.2",
        "vue": "^2.5.15"
    },
    "dependencies": {
        "laravel-vue-pagination": "^2.3.0",
        "moment": "^2.24.0",
        "npm": "^6.2.0",
        "pleasejs": "^0.4.2",
        "prod": "^1.0.1",
        "querystring": "^0.2.0",
        "run": "^1.4.0",
        "tailwindcss": "^1.2.0",
        "vue-multiselect": "^2.1.3",
        "vue-router": "^2.8.1",
        "vue-ua": "^1.5.0",
        "vuex": "^3.1.0"
    }

【问题讨论】：

地址好像有问题。您确定您的app.js 位于assets 目录中吗？因为从 Laravel 5.8 开始，resources 中没有 assets 文件夹，因此我猜你的路径应该像 mix.js('resources/js/app.js', 'public/js').version();。
是的，我确实有一个资产目录。我从早期的 Laravel 版本升级到 5.8（我认为是 5.4）
你能显示你的资源目录的内容吗？您的 js 在 assets 中，而您的 sass 不在，因此我们需要查看当前文件情况。截图就好了
我放弃并坚持使用 Bootstrap 4 :( 页面在这里：employbl.com

标签： laravel sass laravel-mix postcss tailwind-css

【解决方案1】：

你错过了mix.sass('resources/sass/app.scss', 'public/css')的路径

let mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
 .options({
     processCssUrls: false,
     postCss: [tailwindcss('./tailwind.config.js')],
 });

【讨论】：