时间戳

首页 > 解决方案 > Laravel 8 - scss 和 npm run dev 的问题

sass - Laravel 8 - scss 和 npm run dev 的问题

问题描述

尝试过的节点版本：12.20.1、14.15.4、15.6.0

尝试编译 scss 文件时，我总是收到此错误：

npm run dev

> @ dev /var/www/projects/eight
> npm run development


> @ development /var/www/projects/eight
> mix

ERROR in ./resources/css/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):
Error: EISDIR: illegal operation on a directory, read
    at processResult (/var/www/projects/eight/node_modules/webpack/lib/NormalModule.js:597:19)
    at /var/www/projects/eight/node_modules/webpack/lib/NormalModule.js:691:5
    at /var/www/projects/eight/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /var/www/projects/eight/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/var/www/projects/eight/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/var/www/projects/eight/node_modules/postcss-loader/dist/index.js:56:7)

1 ERROR in child compilations
webpack compiled with 2 errors
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `mix`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2021-01-23T23_21_56_881Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2021-01-23T23_21_56_915Z-debug.log

重现步骤：

  1. 安装新的 Laravel 8
  2. 重命名文件 'resources/css/app.css' => 'resources/css/app.scss'
  3. 运行“npm 安装”
  4. 运行 'npm run dev' // 这将自动安装（sass、sass-loader 和 resolve-url-loader）依赖项并显示以下消息：'Finished. 请再次运行 Mix。'
  5. 运行'npm run dev'

然后是上面的错误消息。

PS resources/css/app.scss 文件是完全空的...它只是从 app.css 重命名为 app.scss

问题：为什么会发生这种情况？如何解决？

更新

这是一个小 gif，让您了解实际发生的情况： 在此处输入图像描述

标签： sasslaravel-8laravel-mix

解决方案

嗨，
我将尝试向您解释如何使用 npm 将您的 scss 文件编译为 css 文件，因为您正在混合 SAAS 和 CSS。

  • /app/resources/sass - 有 scss 文件
  • /app/resources/css - 编译后的 scss 的可选文件夹
  • webpack.mix.js - 编译源的设置（scss, js, ...）

我更喜欢将编译设置到文件夹“/public/”。所以你可以在你的 webpack.mix.js 中设置它。

    mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .version();

这将在 /public/js/ 文件夹中生成 app.js，在 /public/css/ 文件夹中生成 app.css。如果要更改 css 的名称，可以在 /resources/saas/ 文件夹中更改 scss 的名称 - 例如从 app.scss 到 admin.scss - 这样它会在下一次 'npm run watch| 后编译 admin.css开发|产品”。

之后，您可以在视图/刀片模板中使用它：

      <link href="{{ asset('css/app.css') }}" rel="stylesheet">

但是，如果您需要将 saas 文件放在 /app/resources/css/ 文件夹中，您也可以在 webpack.mix.js - saas 的源文件夹中进行设置。

推荐阅读