运行上的参数 1 scss 中的 NPM 错误：npm 运行 watch

Question

这是它向我显示的错误，我输入了webpack.mix.js，scss的参数1要在应用程序中使用的 scss 列表：

> @ watch /media/ricardo/FILES/projects/Laravel/costurita-etl
> npm run development -- --watch


> @ development /media/ricardo/FILES/projects/Laravel/costurita-etl
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"

assert.js:49
   throw new AssertionError(obj);
  ^

AssertionError [ERR_ASSERTION]: mix.sass() is missing required parameter 1: src
    at Function.preprocessor (/media/ricardo/FILES/projects/Laravel/costurita-etl/node_modules/laravel-mix/src/Verify.js:32:9)
    at Sass.preprocess (/media/ricardo/FILES/projects/Laravel/costurita-etl/node_modules/laravel-mix/src/components/Preprocessor.js:134:16)
    at Sass.register (/media/ricardo/FILES/projects/Laravel/costurita-etl/node_modules/laravel-mix/src/components/Sass.js:12:21)
    at Api.mix.(anonymous function).args [as sass] (/media/ricardo/FILES/projects/Laravel/costurita-etl/node_modules/laravel-mix/src/components/ComponentFactory.js:98:53)
    at Object.<anonymous> (/media/ricardo/FILES/projects/Laravel/costurita-etl/webpack.mix.js:24:2)
    at Module._compile (module.js:649:30)
    at Object.Module._extensions..js (module.js:660:10)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:501:12)
    at Function.Module._load (module.js:493:3)
[The usual npm errors...]

这是webpack.mix.js:

let mix = require('laravel-mix');
mix.js([
    'resources/assets/js/app.js',
    'resources/assets/js/vague.js',
    'resources/assets/js/freeze_header.js',
    'node_modules/chart.js/src/chart.js',
    'node_modules/jquery/src/jquery.js',
    'node_modules/popper.js/dist/popper.js',
    'node_modules/bootstrap/dist/js/bootstrap.js',
], 'public/js').sass([
    'resources/assets/sass/app.scss',
    'node_modules/bootstrap/dist/css/bootstrap.css',
], 'public/css');

Answer 1

这是因为 .sass 是一个 transpiler 命令而不是 combiner 命令，您将其视为 .js，但事实并非如此。

相反，app.scss 应该是所有依赖项的唯一真实来源，您可以使用 @import 将这些依赖项引入 sass 文件；观察：

// app.scss

@import '~bootstrap/scss/src/bootstrap-grid';
@import '~bootstrap/scss/src/bootstrap-reboot';
@import '~bootstrap/scss/src/bootstrap';

// the rest of your code

~ 是对 node_modules 目录的引用，因此您可以省略对路径的硬编码。您也不需要在此处声明 .scss 扩展名。

最后，您只需将 app.scss 的路径作为字符串参数传递给 .sass 命令：

.sass('resources/assets/sass/app.scss')

Answer 2

即使我遇到了同样的错误...下面 webpack.mix.js 中的代码帮助我解决了它。

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

运行 上的参数 1 scss 中的 NPM 错误：npm 运行 watch

NPM error in parameter 1 scss on run: npm run watch

npm

laravel

webpack

laravel-mix

运行上的参数 1 scss 中的 NPM 错误：npm 运行 watch