Laravel 5 & Webpack SASS - 如何添加另一个 CSS 文件

Posted 2023-03-07

【中文标题】Laravel 5 & Webpack SASS - 如何添加另一个 CSS 文件

【英文标题】：Laravel 5 & Webpack SASS - How to Add Another CSS File

【发布时间】：2017-12-06 13:16:33

【问题描述】：

我正在尝试在 Laravel 5.4 中向 webpack.mix.js 添加另一个文件，但是当我这样做时，编译时出错。

这有效：

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

这不起作用：

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

如何将另一个 CSS 添加到 webpack 到单独的文件中？

编辑

错误：

npm 错误！达尔文 16.6.0 npm 错误！ argv “/usr/local/bin/node” “/usr/local/bin/npm” “运行” “dev” npm 错误！节点 v6.10.0 npm 错误！ npm v3.10.10 npm 错误！代码 ELIFECYCLE npm 错误！ @dev: node node_modules/webpack/bin/webpack.js --progress --hide-modules --config=$npm_package_config_webpack npm ERR！退出状态 2 npm ERR！ npm 错误！ @dev 脚本 'node node_modules/webpack/bin/webpack.js --progress --hide-modules --config=$npm_package_config_webpack' 失败

【问题讨论】：

请明确一下，您是希望将app.scss 和web.scss 编译成单独的文件还是同一个文件？

我想将两者放在单独的文件中

这编译第一个文件：app.scss 但第二个有错误：

npm 错误！达尔文 16.6.0 npm 错误！ argv “/usr/local/bin/node” “/usr/local/bin/npm” “运行” “dev” npm 错误！节点 v6.10.0 npm 错误！ npm v3.10.10 npm 错误！代码 ELIFECYCLE npm 错误！ @dev：node node_modules/webpack/bin/webpack.js --progress --hide-modules --config=$npm_package_config_webpacknpm 错误！退出状态 2 npm ERR！ npm 错误！ @dev 脚本 'node node_modules/webpack/bin/webpack.js --progress --hide-modules --config=$npm_package_config_webpack' 失败。

您可以尝试的一件事是删除您的 node_modules 目录，然后重新安装您的依赖项。

【参考方案1】：

Ross Wilson 提供的解决方案：

您可以尝试的一件事是删除您的 node_modules 目录，然后重新安装您的依赖项（npm install）。

它对我有用。

【参考方案2】：

您需要像这样将所有 scss 文件附加到一个数组中

mix.js('resources/assets/js/app.js', 'public/js')
.sass([
   'resources/assets/sass/app.scss', 
   'resources/assets/sass/web.scss'], 'public/css');

这将输出一个 CSS 文件。

【讨论】：

谢谢，GNewton，但这给了我一个错误：assert.js:85 throw new assert.AssertionError( ^ AssertionError: mix.Sass() is missing required parameter 1: src

这个不行，不能把数组传给mix.sass()