Creating different CSS files with Webpack

Just do this for adding different sass files

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

The second param will be the folder it creates the source files in.

• public/css/app.css
• public/css/listing.css

Thanks for the reply @bashy but does what I´m doing and I get "This dependency was not found:" pasted in the previous post.

You're obviously trying to include something weird within the scss file. Can you show the structure and contents of said file?

The content of listing.scss is:

@import "listings2"; @import "filtros-listings2";

Where listings2 and filtros-listings2 are css files in the same directory.

Ok and are you trying to import the listing.scss file in JS or another CSS file?

At then end what i have done is concatenate the two css files into a unique file when placed in the public directory.

The webpack.mix.js looks like this: mix .js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css');

mix .styles([ 'resources/assets/css/listings/listings2.css', 'resources/assets/css/listings/filtros-listings2.css' ], 'public/css/listings/all-listings.css');

The problem now comes when I inspection the html from the browser it indicates me the code line of all-listings.css, how can I tell webpack that I only want concatenation in production and not development.

I would like to have a development version in localhost and the production in a real server (this one concatenated, etc). Also I´m using git in a bitbucket repository, i read something that git can deploy the repositories code to a production server. What way you recomend me to use in order to copy the code in the production server?

Sorry for the inconvenience but I´m news to this methods.

I'm lost.

Sorry @bashy. I´m going to try and explain the problem in a better way:

I have a file public/css/listings/all-listings.css which is a concatenation of resources/assets/css/listings/listings2.css and resources/assets/css/listings/filtros-listings2.css. Now imagine a want to change something in the CSS file using inspection with F12 in the browser, the inspector tells me the line in the concatenated file (all-listings.css) and i think i should be changing the CSS in the resources folder before concatenation.

Is my concept correct?

It can't know that. Don't think there's a workaround for it.

Is my concept correct?

Are you using Chrome Dev-Tool? If you go under Sources Tab, add your project folder there, this might solve your issue. However, Laravel Mix should generate sourcemap within the CSS file, which helps locating code line numbers in SCSS files, instead of the compiled version of the file.

I've never used .styles in Laravel Mix. So not sure how that relates to sourcemapping, etc.

I'm not sure how your folder structure is, but the dependency issue might be that you're just referencing a file in a wrong location.

I would like to use the default app.scss file for the common css needed at all views. And i would like to generate another file with the specific CSS that will be used in a specific view (listing.scss).

Let's say your file structure is as: (the underscore in file names is just a convention, for files that are included, often called partials)

• app.scss
• listing.scss
• _listing-1.scss
• _listing-2.scss

Use what @bashy wrote in his original response:

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

// listing.scss
@import 'listing-1';
@import 'listing-2';

When you compile, you'll have listing.css file in your public/css folder, now all you need to do is add a link to the stytlesheet in the view that needs it. And when you're debugging, Chrome should display correct line numbers, in the SCSS file not CSS.

Hope that helps.

Also, if you're importing CSS file not SCSS (not sure if that's messing things up), you can always just rename the CSS file to SCSS.

So _listing-1.css becomes _listing-1.scss.

Best, Alen.

@alenabdula Apparently there's .css and .scss in this thread. I'm confused to what is used.

@bashy yeah I had to re-read it and noticed that as well.

@Alvaro_Garcia let us know if any of our suggestions helped

First of all thanks for your replies, at the moment the file structure is the following:

• app.scss
• listings.scss
• _filtros-listings2.css
• _listings2.css

The webpack.mix.js file is has the following:

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

And the listings.scss file has the following:

• @import "filtros-listings2"; //Note: it has to be "" instead of ''
• @import "listings2";

Now if I inspect the code with F12 it points to public/css/listings.css and I would like to know the line in the resources/assets/sass/..

The only solution I can see at the moment is to copy the files from resources to public without concatenation so the line number in Chromes inspector is the same as in the files located at /resources.. If anyone finds a better solution let me know.

Thanks beforehand.