Is it possible for browser sync to replace a CSS file hosted on a CDN upon injection?

Trying to solve a dilemma with my Shopify theme.

Working on my Shopify theme, I find it frustrating that I have to constantly save my CSS changes, switch tabs, and reload the browser to see updates. While I know about the theme gem, it doesn't provide automatic reloading.

Therefore, I decided to create a Gulp task with the following steps:

  1. Detect changes in SCSS files
  2. Compile them into CSS
  3. Inject the changes using browser sync, which proxies the Shopify theme URL to a localhost address

The issue at hand is that Shopify instantly uploads changed assets to a CDN, causing the CSS file to load from a different domain. This makes it difficult for browser sync to recognize the file for injection.

So here's the main question:

If my theme preview URL is proxied to a local address like http://localhost:3000 and loads the CSS file from something like 

https://cdn.shopify.com/s/files/1/0878/7368/t/2/assets/style.css?12713062062911383123
, can I instruct browser sync in Gulp to overwrite that specific file with the necessary changes for injection?

Hoping this all makes sense.

cssgulpshopifybrowser-sync

Answer №1

I managed to accomplish the task you mentioned by utilizing the rewriteRules feature in Browser Sync.

rewriteRules: [
    {
        match: /\/\/cdn\.shopify\.com\/s\/files\/(.*)\/assets\//g,
        replace: '/assets/'
    }
],

This function will intercept requests made to 

https://cdn.shopify.com/s/files/1/0878/7368/t/2/assets/style.css?12713062062911383123
and replace them with just style.css?1271306206291138312, although additional adjustments may be necessary depending on your local setup.

Remember to configure bsFiles, proxy, serveStatic, serveStaticOptions, and other relevant options according to the specific requirements of your project.

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

What is the best way to place an <a> tag and a <p> tag side by side in an HTML

I have a question on organizing this HTML code: <ol class="results-list"> <% @results.sort_by { rand }.each do |result| %> <li class="<%= 'checked-out' if result.catalog_item.library_status == 'Checked out&apos ...

htmlcss

Is the H1 tag styled differently when located within an article element? Additionally, what is the best way to style multiple paragraphs within a

What is the best and most effective way to style multiple paragraphs within a div or semantic tag, each with different styles? Also, I have noticed that when I include an h1 tag inside the article, it does not display at the expected size. Does anyone know ...

htmlcsscss-selectors

Error 404: Jquery Fancy Box Not Found

Help needed with JQuery FancyBox: I encountered a 404 error when trying to enlarge small images. Here is the code that I used: <a class="fancybox-buttons" data-fancybox-group="button" href="images/gallery/1_b.png" style="margin-right:100px;"><im ...

javascriptjquerycsshtmlfancybox

The proper way of aligning text in the middle of a button

I'm currently working on designing a CSS button that will be placed in the top left corner and serve as a back button to the previous page. However, I am facing challenges when it comes to centering the arrow or text perfectly in the middle of the but ...

htmlcss

How can you remove the border when an input is in focus on Chrome or Microsoft Edge?

I need to style an input field in a way that removes the black borders/frame that appear around it when clicked on in Chrome and MS Edge. Strangely, Firefox does not display this frame/border. How can I achieve this consistent styling across all browsers? ...

htmlcss

Toggling the visibility of a div using JavaScript

When I click the button, I want to show and then hide a div. However, it doesn't work on the first click - only on the second click. How can I make it work on the first click? HTML <p>Click the button</p> <button onclick="myFu ...

javascripthtmlcss

Show a specific portion of an extremely large .svg image file using Angular.js directive with the help of javascript or css

Currently, I am facing a challenge with a large map image (3000x8000px) in .png format that I have converted to .svg for data visualization purposes. I am struggling to find a way to display a specific small section of this map.svg file on an HTML page u ...

jqueryhtmlcsssvgangularjs-directive

Implementing the 'bootstrap tour' feature in a Ruby on Rails application

I have integrated bootstrap-tour.min.css and bootstrap-tour.min.js into my project. <script type="text/javascript" src='bootstrap-tour.min.js'></script> <link rel="stylesheet" type="text/css" href="bootstrap-tour.min.css"> Her ...

javascriptcssruby-on-railsrubytwitter-bootstrap

Want to learn how to center a webpage only for a specific device width? For example, have your mobile device display the content in the center, while

Hello! I'm new to the world of @media queries and am currently trying to make my webpage responsive by centering it on smaller devices while keeping the display normal on larger screens. My website, mastercontrolunit.com, looks great in deskto ...

htmlcss

Is there a way to eliminate the transform style from a draggable element?

I am looking to enhance the CDK drag and drop example by adding a preview of the dragged element with specific left and top positions, without utilizing the transform style. HTML <div class="example-boundary"> <div class="example- ...

javascriptcssnode.jsdraggableangular13

Create a radial-gradient() that covers two separate elements

Seeking to create a spherical appearance for a circle made of two semi-circular divs using background: radial-gradient(). Any ideas on achieving this effect without combining the two semi-circle divs into one circular div? [The decision to use two semi-ci ...

cssradial-gradients

AngularJS allows users to easily select and copy all text from both div and span elements within a specified range. This feature makes it

I am working on implementing a select all feature using AngularJS for text displayed in a structure similar to the one below. Once all the text is selected, users should be able to press ctrl + c to copy it. <div ="container"> <div class="header ...

javascripthtmlcssangularjsjqlite

Bootstrap 4 allows for the use of the d-lg-flex class to create a flexible column layout

I'm facing an issue with my table on smaller screens where some columns need to be hidden. Here's the code snippet I'm using: <table> <tr> <td>Normal 1</td> <td class="d-lg-flex d-none">hidden 1</t ...

htmltwitter-bootstrapcssbootstrap-4

Using HTML and CSS to create interactive icons that change color when clicked, similar to how a link behaves

Have you ever wondered if there's a way to make an icon act like a link when clicked, just like regular text links turning purple? And not just the last one clicked, but every single icon that gets clicked. Trying to use the :visited pseudo was unsucc ...

javascripthtmljquerycssvisited

What is the best way to tally the frequency of words in a collection of URLs using JavaScript?

I have a JSON object in WordPress that contains a list of URLs. I would like to determine the frequency of occurrence of the second part of each URL. Currently, the code snippet below is able to extract the remaining part of the URL after the prefix https ...

javascriptjqueryhtmlcsswordpress

What is the best way to showcase my divs in a masonry layout using flexbox?

I am attempting to design display divs in a masonry style using flex/flexbox. The layout must consist of a maximum of 2 columns, with each div having the same width (thus dividing into 2 columns equally) while varying in height based on their content. Some ...

htmlcss

What are the steps to make a div with no content inside?

Presently, I am dealing with 2 overlapping transparent div's each containing unique buttons and functionalities in the following manner: .item1{ height:10rem; width:10rem; position:absolute; border:0.5rem solid red; background-color:trans ...

javascripthtmlcss

Design a layout consisting of a grid with items that maintain a set maximum width while being evenly distributed across the entire width of the device

I'm trying to create a grid with 2 rows and 3 columns, each cell having an image with a max-width of 512px. I added margin to the grid but now the cells are larger than the content. How can I achieve the same visual appearance as flexbox's justif ...

htmlcsscss-grid

How can I change the Safari blue outline to black?

I have an input field and I have applied the following CSS to it: input:active, input:focus { outline: 1px auto rgb(16, 16, 16) !important; outline-offset:0px; } However, when I tested it using , the input field still had a blue outline: I was hoping ...

htmlcsssafari

divs placed next to each other

I'm facing an issue with 4 divs within a parent div. I've used float:left in the style of all 4 divs to display them side by side. Although the divs are appearing next to each other, the height of the parent div is not adjusting to accommodate th ...

csshtml