What could be causing my VS Code live sass compiler to not compile my scss file properly?

I've encountered an issue with compiling scss partials, so I made the following adjustments to my settings:

{
"es6-css-minify.cssPostfix": "",
"liveSassCompile.settings.autoprefix": [
],
"liveSassCompile.settings.formats": [
    {
        "format": "compressed",
        "extensionName": ".css",
        "savePath": "/wp-content/themes/dawn-child",
    }
],
"liveSassCompile.settings.includeItems": [ "/wp-content/themes/dawn-child/style.scss" ],

However, despite these changes, the scss files in the specified folder are still not being compiled. I also attempted altering the saved path to dawn-child and dawn-child/style.css, but without success.

I am utilizing the Glenn Marks Live Sass Compiler. Could there be a flaw in my configuration?

cssvisual-studio-codesasscompiler-errors

Answer №1

To ensure proper file path, consider adding a period in front of the directories:

"savePath": "./wp-content/themes/dawn-child",

Also include the period in items like this:

"liveSassCompile.settings.includeItems": [ "./wp-content/themes/dawn-child/style.scss" ],

The presence of the period signifies the current directory where the .json file is being executed from.

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

How to Incorporate a Glyphicon into an ASP.NET Button with Bootstrap

I'm a beginner with bootstrap/asp.net and I think I might be making a mistake somewhere. My goal is to have a bootstrap glyphicon appear next to my button. I believe I am not able to use asp:Button, but instead should use LinkButton. Here is the code ...

cssasp.nettwitter-bootstrapbootstrap-4

Restricting the height of the grid list in Vuetify

Lately, I've been working with Vue.js and the Vuetify framework, and I encountered a challenge that has me stumped. In certain instances, I need to present data in a grid layout using the vuetify grid component. After examining the code, I decided t ...

cssvue.jsvuetify.js

Element overlapping due to CSS float styling

I'm feeling a bit puzzled and would really appreciate some guidance. After reading the MDN article on float, I decided to try out their example by copying and modifying it. To my surprise, the floated element appeared to the left of the next element, ...

css

Ways to clear away adhesive header and maintain its fixed position

I've been tinkering with my website, which you can find at this link: . I used the html5 up template for it, and the template came with a sticky header. However, when the site is viewed on a smaller screen, there's an ugly gap that forms between ...

javascriptcsshtmlscrollsticky

Website image container for optimal responsiveness

I recently started using Bootstrap 5 to build a new website and I encountered an issue with the layout of my feature and mission sections. I wanted the images to move above the text when the viewport is scaled down to mobile or tablet size, but I wasn&apos ...

htmlcssresponsive-designfrontendbootstrap-5

Each attempt to install a new package results in a syntax error pointing to "gyp err"

While in the process of installing Firebase, I encountered a similar issue when attempting to install yarn add react-router-dom. To resolve this, I had to create a new project and manually copy over all the files again. What stood out to me was that this ...

node.jsreactjsnpmsassyarnpkg

Can you tell me which BBC channel is airing this animation?

Is anyone familiar with the animation on the login screen of BBC when entering the day, month, and year? Check it out here: ...

cssajaxauthentication

Navigating through a list of items using keyboard shortcuts in HTML

Similar Question: KeyBoard Navigation for menu using jquery I have developed a menu using unordered list items and display it when the user presses the Enter key in the textbox. While the user can navigate through the menu using the mouse to select it ...

jqueryhtmlcssnavigationcontextmenu

How to completely color a div in CSS

<h:head> <title>Unique Title</title> <style> .top{ margin: 0; padding: 0; background-color: blue; height: 15px; width: max-content; } </style ...

htmlcss

What is the best way to ensure a div is always scrollable?

I am currently working with Angular 4 and Bootstrap 4 (alpha 6). I have implemented ngx-infinte-scroll to fetch data from the server when the user scrolls to the top or bottom of the div. The issue I am facing is that the user can only scroll when there ar ...

htmlcsstwitter-bootstrapangular

During the animation sequence, the element is seen ascending

I'm encountering a small issue with one of the elements I'm animating - it's moving up slightly during the animation process. It elevates about 2-3 pixels while the animation is playing, then snaps back down once it's completed. The el ...

javascriptjqueryhtmlcssanimation

"Divs of the same type automatically adjust size to fit within the

I am currently exploring the possibility of creating a versatile component that can be customized based on the needs of its parent element, whether through bootstrap or traditional flexbox / CSS grid. I want to determine the level of reusability this compo ...

htmlcssbootstrap-4

Tips for achieving a design aesthetic similar to that of the JQuery UI website

On my website, I am using jQuery UI along with the "Smooth Default" CSS theme. However, I have noticed that everything appears larger compared to the jQuery UI website itself. For instance, when looking at the buttons here: http://jqueryui.com/button/ The ...

cssjquery-ui

Attempting to align two blocks side by side

As I work on developing my website, I encountered an issue with positioning div tags. I set up a side-navigation div and a body div within a site that is 1500px wide and 1000px tall, with the side-navigation at 300px and the body at 1200px in width. To my ...

htmlcsspercentage

Customize WPBakery Accordion Background Color

I'm currently using WPBakery's Accordion section, version 5.4.7, to showcase a Gravity Form. I am attempting to modify the background color of the active accordion section to black. After exploring various forum examples, I have attempted to add ...

csswordpressaccordionbackground-colorvisual-composer

Opening a dialogue box upon clicking a table row

I have a table in HTML where I want a dialog box to appear when a row is clicked. To update my database, I am using an AJAX call like this: $(document).ready(function() { $('.myrow').click(function () { $("#dialog").dialog({ ...

javascriptjqueryhtmlcssajax

Problem with translating a variable into a selector in JQuery

When attempting to make my Jquery code more flexible, I decided to extract the selector and access it through a variable. However, despite creating variables for both selectors, neither of them seem to be functioning properly. I am confident that the issue ...

javascriptjqueryhtmlcss

The custom font is failing to load on a basic HTML website

I've been exploring different code and examples online in an attempt to incorporate a custom font into my simple HTML website. Just for reference, I'm using Django. Key files to note: aurebesh_translator.html <!DOCTYPE html> <html> ...

htmlcssdjangofonts

Page Content Fails to Load Without Reloading

I am currently working on a simple project using React with TypeScript, and I have run into an issue where the page content does not refresh as expected without having to reload the page. I am unsure of the underlying cause of this behavior. I have include ...

cssreactjstypescriptreact-hooksbootstrap-5

Turn off the background when the automatic popup box appears

I have implemented a popup box that automatically appears after 5 seconds when the site is loaded. However, if I click outside of the popup box, it closes. I want to disable the background when the popup box is displayed. If I remove the two lines of code ...

javascriptjqueryhtmlcsspopupwindow