SassとプレーンCSSをLaravel Elixirで1つのファイルに結合

Question

普通のCSSとSassファイルをLaravel Elixirとどのように組み合わせますか？次のコードを実行すると、 "all.css"と "app.css"という2つのファイルがpublic/CSS/ディレクトリに生成されます。しかし、私はall.cssとなる1つのCSSファイルを生成したいだけです。あなたはそれをするために何かを知っていますか？

elixir(function (mix) { 
    mix.sass([ 
      'app.scss' 
     ]) 
     .styles([ 
      'owl.carousel.css' 
     ]); 
}) 

Answer 1

いつもそうです。ディレクトリ構造：

/public 
    /css 
     all.css 
/resources 
    /css 
     app.css 
    /sass 
     app.scss 

コードは次のようになります。

elixir(function (mix) { 
    mix.sass([ 
     'app.sass' 
    ], 'resources/assets/css/custom.css') 
    .styles([ 
     '/resources/assets/css/app.css', 
     '/resources/assets/css/custom.css', 
    ], 'public/css/all.css', __dirname); 
}) 

これは最初の /resources/assets/css/custom.css でのcustom.cssファイルを作成し、すべてのcssファイルになりますこのフォルダ内のファイルは、/public/cssにある1つのファイルにマージされます。理論的にはあなたがエリキシルミキサーに、通常のCSSファイルを渡すことができますので、

Answer 2

は、ディレクトリを分離するほどきれいではないかもしれませんがSASSファイルには、CSSファイルにコンパイルされます。

mix.sass(['app.scss', 'jumbotron-narrow.scss', 'datepicker_standalone3.css']); 

最終結果です対応するパブリックディレクトリ内の単一のapp.cssファイル