如何使用Laravel Mix连接已编译的SASS和组合的CSS? [英] How to concat compiled SASS and combined CSS using Laravel Mix?

问题描述

在我的Laravel项目中，我同时使用SASS和CSS:SASS用于依赖项(fontawesome，Bootstrap)-通过NPM和跨深层文件夹结构(BEM)的纯CSS.我想将所有CSS串联在一起，编译SASS并将它们全部串联在一个.css文件中.与JS相同:我的BEM结构中的普通JS文件需要与单个 app.js 文件结合使用，而该文件需要由Webpack处理.我试过了:

In my Laravel project I use both SASS and CSS: SASS used for dependencies (fontawesome, Bootstrap) - via NPM and plain CSS across deep folder structure (BEM). I want to concatenate all CSS, compile SASS and concatenate it all in a single .css file. Same with JS: plain JS files in my BEM structure need to combine with single app.js file which needs to be processed by Webpack. I tried this:

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');

但是它不起作用-仅创建清单文件:

But it doesn't work - only manifest file is created:

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

推荐答案

以下是示例:

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');

这篇关于如何使用Laravel Mix连接已编译的SASS和组合的CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！