From where does my webpage retrieve its scss files?

Currently, I am working on a web project using an HTML/CSS template that was initially created by someone else. From what I can tell, the template is utilizing bootstrap, which I'm not very familiar with.

As I was inspecting the page using the developer tools in Chrome, I noticed that some of the CSS styles were originating from SCSS files that do not seem to be located anywhere on my system. I'm left wondering where these elusive files are hiding.

The issue arises when comparing the path to the SCSS file shown in Chrome's developer tools and the actual path on my computer. The directory mentioned (within the "vendor" folder) appears to be non-existent, contrary to what the browser is indicating.

If anyone has insight into how the browser is able to load these mysterious SCSS files, I would greatly appreciate your assistance. Despite attempting to reveal hidden files and folders on Windows, I have yet to locate the missing SCSS files. Thank you!

Path to SCSS file as per Chrome Dev Tools:

Actual path within my file system:

csssassbootstrap-4

Answer №1

The occurrence was a result of utilizing scss sourcemap during the compilation process from scss to CSS, designed for simplified debugging purposes.

It is my assumption that you are currently utilizing the developmental version of bootstrap. If you switch to the production version, this issue should not occur.

For further details on this matter, feel free to visit here

Answer №2

If you find files with the ".map" extension in your project directory, those are known as source maps in the world of SCSS. These ".map" files point to the location of the ".scss" files that were utilized during the development process to generate the corresponding ".css" files. Even if there are no actual ".scss" files present in your current context, and your HTML file is referencing the compiled ".css" file, the Chrome debugger will still display the original ".scss" file that was used for compilation. To make the Chrome debugger show the actual ".css" file name instead of the non-existent ".scss" files, you can temporarily remove the ".map" file. This suggestion assumes that you prefer seeing the ".css" file name over the missing ".scss" files. For further insight on how to work with ".scss" files in Chrome debugger, you may refer to this resource: https://www.sitepoint.com/using-source-maps-debug-sass-chrome/

Answer №3

Utilizing a CSS preprocessor like SASS or SCSS in conjunction with a build tool such as Webpack will result in the compilation of *.scss files into *.css files during the build process. This may lead to the merging of multiple *.scss files into a single *.css file, rather than a one-to-one mapping.

Depending on the configuration of your build tool, the output *.css file may be accompanied by a source *.map file

The source map is hosted by your development web server (and potentially by the production server if configured), and is automatically downloaded by browsers when available (as browsers search for a source map file with the same name as each js, css, etc file they retrieve).

Upon opening Dev Tools in your browser, the source map file is parsed to recreate the development environment structure, naming conventions, syntax, etc., allowing for easy debugging of your web application by referencing your original source code.

In essence: The *.scss files you see are essentially "reconstructed" through *.map files in the browser.

Keep in mind that you have the option to disable source maps in your build tool or manually delete all *.map files from your project folder if you prefer to view the actual CSS code processed by the browser.

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

Safari fails to set a div to 100% of its parent's height

Currently, I am developing a website where the layout of a section is structured as follows: <div class="col-md-6"> <section class="right" data-type="background" data-speed="30" style="background: url(<?php echo get_field('book_image& ...

htmlcsssafaribootstrap-4

The Carousel created using only CSS and npm packages does not function properly when implemented in a ReactJS environment

I have been attempting to incorporate a basic carousel in my react project. I have experimented with both pure CSS and various libraries, but in every instance, the outcome has been consistent. View the screenshot of the result All child elements are dis ...

javascripthtmlcssreactjspure-react-carousel

The printout of the webpage is not aligning properly on an A4 page

Currently, I have been utilizing the JavaScript function window.print() to print a webpage that contains a header and footer. The height of this webpage is dynamic, as it is dependent on the content of an HTML table within the page. However, I have encou ...

javascripthtmlcssprinting

A guide to mastering the art of descending using three distinct class types

My script is functioning properly for a single class, but it fails to work for multiple classes with the same purpose. I attempted to transfer from div (#panel) to class (.panel) as I am using several classes. However, this adjustment did not resolve the i ...

jqueryhtmlcss

Alignment of buttons in a row using Bootstrap 4

I'm facing an issue with aligning two buttons in a bootstrap 4 flex row vertically. I want them to align at the bottom with the inputs on the same row. https://i.sstatic.net/66OOn.jpg You can view the fiddle here. Here's the code snippet: < ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

Add CSS styling to a section of a canvas

I want to use a specific cursor png for just a portion of a canvas. Currently, I have code that applies the cursor to the entire canvas like so: .myClass { cursor: url('../img/myCursor.png') 7 33, auto; /* img hotspot centred*/ } However, I ...

javascripthtmlcss

Unable to get the Gtranslate function to function properly within the drop-down menu

Currently, I am using Gtranslate.io languages on my website with flags displayed without a drop-down menu. Everything is running smoothly but now I am looking to enhance the user experience by placing the flags inside a drop-down list. I want English to ...

javascriptjqueryhtmlcss

The functionality of smooth scrolling is not compatible with the overflow-y property

Looking to implement a smooth scroll feature, I came across an example online and tried to adapt it. Here's the code I'm working with: https://jsfiddle.net/4DcNH/144/ I've added specific conditions to the html and body elements (changing t ...

javascriptjqueryhtmlcss

encountered net::ERR_EMPTY_RESPONSE while attempting to locate a CSS file within an AngularJS directive

Every time my webpage attempts to access the css file from a directive, I encounter a net::ERR_EMPTY_RESPONSE. I have implemented door3's on-demand css feature, which allows for lazy loading of css files only when necessary. This feature works flawle ...

javascriptjqueryhtmlcssangularjs

Select and emphasize specific sections of text

Can I create an input element that looks like the one in my screenshot? I want to be able to change the value with JavaScript and highlight text by wrapping it with '*' and giving it a different color. Thank you for any assistance. ...

javascriptcssasp.nethtml

JavaScript incorporates input range sliding, causing a freeze when the mouse slides rapidly

Currently working on a custom slider and encountering an issue. When quickly moving the mouse outside the slider's range horizontally, exceeding its width, the slider doesn't smoothly transition to minimum or maximum values. Instead, there seems ...

javascripthtmlcss

I'm curious about where to find more information on this new technology called the 'scroll to page' feature

Recently, I came across a captivating website feature that caught my eye. As someone relatively new to front end web development, I am intrigued by the scrolling technique used on this site. I'm specifically drawn to the 'page to page' scro ...

javascriptjquerycssfrontend

Utilize SASS for personalized button color customization

Today, I am resorting to opening this discussion due to my lack of the required 50 reputation points that are necessary for me to post my query directly in the topic that piques my interest. The challenge at hand revolves around my need for 25 bootstrap b ...

sassbootstrap-4

Tips for automatically disabling cloudzoom based on image width

I'm currently utilizing cloudzoom with the given markup: <div id="container"> <img id="main-image" class="cloudzoom" src="/img/image1.jpg" data-cloudzoom="variableMagnification: false, zoomOffsetX: 0, zoomPosition: 'inside', zoom ...

jqueryhtmlcss

How to Align Video Alongside Image in HTML without Using CSS

Is there a way to place a video on the left and an image on the right of the same line in HTML without relying on CSS? ...

htmlcssalignment

What is a way to adjust the width of fixed columns in a Bootstrap 4.0 responsive table?

I've been struggling to make this work despite following similar questions and answers. I attempted to adjust the column width by directly setting each one, but nothing seems to change! <thead style="white-space: nowrap"> ...

javascripthtmlbootstrap-4html-table

`<li>` - a list element aligned on the same line as the text before it

I am currently working on customizing an HTML logfile that allows specific items (like exceptions) to be collapsed. To achieve this, I have utilized an unordered list with several li elements. However, I am facing an issue where the first li element is not ...

htmlcss

Having trouble locating the stylesheet for import

Currently utilizing bootstrap and sass, along with Nodejs and grunt. File: app.sss $icon-font-path: "/bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/"; $fa-font-path: "/bower_components/font-awesome/fonts"; $header-height: 50px; ...

sassbootstrap-4

What could be causing the issue with image handling in ASP.NET deployed on a local IIS server?

My web app, built using ASP.NET 4 MVC2 architecture in Visual Studio 2010, has been deployed to my local IIS server under the virtual directory EasyMan4. Recently, I added an image to the Content Folder via Solution Explorer. In the Site.Master page, I ins ...

asp.netcssasp.net-mvciis

Eliminate a class by simply clicking on any section of the screen

I've created a dynamic "side-navigation" feature that can be hidden and shown (sliding from the right) by clicking on a specific icon. The functionality is implemented using an onclick function. Now, I'm looking to add a feature that allows the m ...

javascripthtmljquerycss