如何使用 Laravel Mix 连接编译的 SASS 和组合 CSS？

Posted 2023-03-14

【中文标题】如何使用 Laravel Mix 连接编译的 SASS 和组合 CSS？

【英文标题】：How to concat compiled SASS and combined CSS using Laravel Mix?

【发布时间】：2018-01-22 10:02:03

【问题描述】：

在我的 Laravel 项目中，我同时使用 SASS 和 CSS：SASS 用于依赖项（fontawesome、Bootstrap）——通过 NPM 和跨深层文件夹结构 (BEM) 的纯 CSS。我想连接所有 CSS，编译 SASS 并将它们全部连接到一个 .css 文件中。与 JS 相同：我的 BEM 结构中的普通 JS 文件需要与需要由 Webpack 处理的单个 app.js 文件组合。我试过这个：

mix.js('resources/assets/js/app.js')
    .scripts('resources/assets/blocks/**/*.js')
    .version('public/js/app.js');

mix.sass('resources/assets/sass/app.scss')
    .styles('resources/assets/blocks/**/*.css')
    .version('public/css/app.css');

但它不起作用 - 只创建清单文件：

  "/js/app.js": "/js/app.js",
  "/css/app.css": "/css/app.css",
  "/mix.js": "/mix.js"

【问题讨论】：

如果将所有 .css 文件更改为 .scss（使用脚本）会怎样 - Sass 将能够编译它们

【参考方案1】：

这是一个例子：

mix.sass('resources/assets/sass/app.scss', 'public/css').styles([
    'node_modules/animate.css/animate.min.css',
    'public/css/app.css'
],'public/css/app.css');