Preventing Laravel Mix from replacing app.css with a different file

Every time I run npm run dev, the content of style.css is being overridden. Here is my webpack file:

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

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

 mix.styles(['resources/assets/style.css'], 'public/css/app.css');

Is there any way to append the css instead of overriding it?

Answer №1

app is the default name used by webpack.

Therefore, you can either modify

.sass('resources/assets/sass/app.scss', 'public/css') ->  .sass('resources/assets/sass/app.scss', 'public/css/newfile.css')

or

mix.styles(['resources/assets/style.css'], 'public/css/app.css') -> mix.styles(['resources/assets/style.css'], 'public/css/styles.css')

Edit: If you want everything in a single file

mix.sass('resources/assets/sass/app.scss', 'public/css/app.css')
mix.styles(['public/css/app.css', 'resources/assets/style.css'], 'public/css/app.css')

I hope this guidance proves helpful to you!

Answer №2

Your webpack configuration does not require any modifications.

When using Sass, it is possible to import regular CSS files along with .sass and .scss files. The only condition is that the file extension should not be explicitly mentioned in the import statement, as .css extensions are reserved for plain CSS imports.

Webpack Configuration

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

Sass File (resources/assets/sass/app.scss)


...

@import '../style.css';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Angular's ng-style directive to apply various styles based on multiple conditions and attributes

I am attempting to apply multiple styles to an accordion group using the ng-style directive since ng-class is not compatible with accordions. Here is my current implementation: ng-style="{ border: ivrMessageForm.ivr_messagetitle.$error.required && ...

Implement dynamic changes to CSS variable values using Typescript during runtime

My angular 4 web application requires dynamic styling based on color values and image URLs received from the backend. While I have successfully set up the app to load images from the server, handling color values poses a greater challenge. The primary colo ...

Unexpected horizontal scrolling problem on my bootstrap webpage

I'm currently experiencing a horizontal scrolling issue on my Bootstrap page. Can anyone provide insight into why this might be happening? You can view my page here. Here is a snippet of my CSS code: @media (min-width: 1400px) and (max-width: 1440px) ...

Make a big picture fit into a tiny container

I have a question about image rendering. What occurs when we try to fit a large image into a small container? Consider, for example, creating an HTML page with a 100x100 px image on a device with a pixel ratio of 2. Situation 1: Placing the image inside a ...

What causes the Top Navbar in Twitter Bootstrap to exceed the container when fixed?

While working with the default fixed-top navbar in Bootstrap, I encountered an issue where it spans the full width of the viewport. In order to contain it within a specific container div, I tried applying a CSS override for the left side: .navbar-fixed-to ...

The perplexity surrounding the functionality of th and tr tags is causing confusion in

Below is the code snippet I have in my HTML table. <table> <tbody> <thead> <tr> <th align="right" colspan="4"> <span class="font-style-bold">SCHEDULE OF RATES</span> ...

Space between an image and a div element

While creating a website in Dreamweaver CC, I noticed a significant gap between my image and a div tag. Here is a screenshot for reference: Below is the code from my index file: <!doctype html> <html> ... </div> Additionally, here is a ...

Designing links within a web application

Currently, I am developing a web application that will contain a high volume of clickable elements. The challenge lies in maintaining a visually appealing design while adhering to web best practices such as using different colors and underlines for links. ...

Utilizing Modernizr for detecting support of background-clip:text functionality

Recently, I decided to utilize Modernizr in order to check for support of the css property background-clip: text. After some research, I came across this page:https://github.com/Modernizr/Modernizr/issues/199 I then added the following code to my website ...

Stop text from overflowing when it reaches the maximum width in flexbox

A basic flexbox layout is displayed with an image next to text, aiming for this layout: #container { align-items: center; background: black; display: flex; justify-content: center; padding: 10px; width: 500px; /* Dynamic */ } #image { bac ...

Eliminate the preset !important declarations within elements

I am currently facing a CSS conflict on my WordPress site caused by a prominent plugin. The developers of the plugin have scattered !important declarations across their style sheets, making it difficult for me as a developer to make necessary changes. Whil ...

having each individual div function on its own accord

Is there a more efficient way to make HTML and CSS function independently without duplicating the code multiple times and changing IDs or class names? Currently, only the top male and female button works when clicked. I am looking for a CSS-only solution t ...

Animating background color change with scroll in React using fade effect

Can someone help me with implementing a fading animation for changing the background color on scroll in React? I have successfully achieved the background change effect, but I'm struggling to incorporate the fading effect. import React from "reac ...

Checking session timeout in Laravel to ensure the form is filled out in a timely

When designing my login form, I wanted to implement a feature to check session timeout for filling out the form. After submitting the form, I needed to ensure that the user can fill it over a long period of time. If the session has expired, the form should ...

Creating a single div with content that spans the entire page when printed

I am working on an Aurelia app that requires printing out labels. The challenge I am facing is getting a hidden div on the page, containing the label layout, to be printed in full size and stretched to fit the entire page in landscape orientation. Currentl ...

What is stopping this paragraph from being vertically centered with just one line?

After following instructions from another user, I successfully centered text vertically. However, I encountered difficulties when trying to center the entire content vertically. My attempt to enclose the text in its own div did not yield the desired result ...

Create two grid components for Material-UI and use Flexbox to ensure that both items have equal height

I'm currently working on ensuring that two grid items have the same height using flex in Material UI, but I've hit a roadblock. It seems like my approach with the Grid element might be incorrect. I've experimented with adjusting the height a ...

Guide to positioning Bootstrap 5 toast messages at the center of an ASP.NET Web Form

I have integrated a Bootstrap toast element within an ASP.NET web form as shown below: <asp:Content ID="ctMain" ContentPlaceHolderID="cpMain" runat="server"> <div aria-live="polite" aria-atomic="tru ...

Ensure that two div elements are always aligned, regardless of the circumstances

Is it possible to ensure that my two divs are always aligned, regardless of the content inside them? Sometimes the left div may contain images of varying sizes, while the right div may have text with different lengths. I initially tried setting a min-heigh ...

Partial element visibility while scrolling

My goal is to create a table with a fixed size that can be horizontally scrolled. I applied overflow-x: auto;, but only a part of the table is scrolling while the start of the table is off the screen. I am unable to provide the code, so I've added a s ...