Instructing my config.rb file to direct my compiled .scss file output to the main root directory

My goal is to configure my CSS output file in the config.rb file to be located at the root level of my main directory and named "style.css". Everything works fine when I set all the filepaths in config.rb like this:

http_path = "/"
css_dir = "assets/css"
sass_dir = "assets/sass"
images_dir = "assets/images"
javascripts_dir = "assets/js"
fonts_dir = "assets/fonts"
output_style = :compressed
environment = :development

However, since I develop many WordPress websites locally, I need the css_dir = "assets/css" to be set at the root of the main directory with the name style.css. When I try using css_dir = "/", it breaks and does not output my style.css to the root.

Does anyone have suggestions on how I can achieve this without having to manually move the output from assets/css/style.css to the root upon deployment? This manual process is not efficient or ideal for my workflow, so I'm seeking a simpler solution that should be an available option.

I also attempted Chris Coyier's suggestion mentioned here, but it did not work either: http://css-tricks.com/compass-compiling-and-wordpress-themes/

cssrubycompass-sass

Answer №1

Perhaps this explanation will be of assistance:

When defining the http_path in your config.rb, you are instructing Compass on the current directory path. This information is primarily utilized when absolute paths are enabled and Compass URL helpers are being utilized. It is important to note that Compass may not always accurately identify the actual project root, especially in PHP CMS platforms like WordPress or Drupal.

Consider the following structure of your documents:

project_root
- foo
-- bar
--- baz

In this scenario, let's designate baz as our theme folder.

Regarding the compilation of your CSS files, it is unclear whether you are inquiring about modifying the CSS Directory solely for production builds while maintaining assets/css for development purposes, or if a complete directory change is desired. In any case, the solutions provided below should address your needs. For both instances, we assume that the desired external Compass root directory for CSS generation is project_root.

Alter CSS Directory Path Specifically for Production Builds

Utilize 

css_dir = (environment == :development) ? 'assets/css' : '../../../'
to compile CSS into assets/css during development processes (compass compile/compass watch), and into project_root during production activities (
compass compile -e production --force
). Note the use of Unix-style directory navigation to position the file outside of the theme directory.

Adjust CSS Directory Path for All Compilation Purposes

Include css_dir = "../../../" and proceed with running compass watch or compass compile as usual.

Regardless of the approach chosen, refrain from allowing Compass to rename your file. Maintain the name of your Sass file as style.scss.

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

Unable to unfollow using js code

JavaScript Fiddle In my current project, I am implementing follow and unfollow buttons. The follow functionality is working smoothly, but I'm facing an issue with the unfollow button. When I click on it, it doesn't switch back to follow. You can ...

javascriptjquerycss

Automate the task of checking a checkbox using Selenium in a Ruby program

I am trying to automate checking a checkbox using Selenium with Ruby. I have written the code below, but for some reason, the checkbox is not getting checked. Can someone help me figure out what I am doing wrong? This is the code I have so far: # code el ...

rubyseleniumselenium-webdriverselenium-chromedriver

Is there a way to align the button in the middle of the dropdown menu?

I am struggling to center align a button inside a dropdown menu that I have created for signing in. https://i.sstatic.net/2O3uk.jpg <ul class="nav navbar-nav navbar-right"> <li class="dropdown text-center"> <a class="dropdown-toggle" ...

htmlcssbootstrap-4

Automatically close the multiselect dropdown when the user interacts outside of it (varied scenario)

For those interested, check out this jsfiddle link: http://jsfiddle.net/jaredwilli/vUSPu/ This specific code snippet focuses on creating a multi-select dropdown feature. When a user chooses options from the dropdown and then clicks outside of the menu are ...

javascriptjquerycssangularjs

Vue unable to load material icons

The icons npm package "material-icons" version "^0.3.1" has been successfully installed. "material-icons": "^0.3.1" The icons have been imported as shown below. <style lang="sass"> $material-icons-font-path: '~material-icons/iconfont/'; ...

cssvue.jssassvuejs2google-material-icons

Creating a second level drop down menu with HTML and CSS

After exploring a few questions and attempting to use similar ideas, I'm still struggling to get this to work. Could someone lend a hand? My goal is to create a second level drop-down menu using a provided template that does not have it built-in. How ...

htmlcssmenu

Selenium Grid Time Limit

Our selenium-client (1.2.18) script is timing out in the test environment. Despite working locally, it fails to communicate back to the node in our test setup. The snippet of code provided below showcases the minimum required for replicating the timeout is ...

rubyselenium

Is it possible to utilize ::before content in order to turn a div into a clickable link?

I am currently working on customizing the appearance of a Wordpress site, and I have encountered an issue with a specific DIV element that I would like to make clickable instead of using its current content. The page-builder being used on the site is makin ...

javascripthtmlcsspseudo-element

Tips for limiting the impact of email CSS on the appearance of the application?

Currently working on developing an email client using Angular and facing a challenge. Occasionally, the messages sent include style which impacts the app's CSS (for example, links turning purple when viewing these messages). Removing this tag disrupts ...

htmlcssangularjsemailhtml-email

Display the background image beyond the boundaries of the div element

I am facing an issue with an image background on a website. The background consists of leaves spreading out to the middle of the page, creating a height of 600px. However, I need to divide this image into three sections: header, content, and footer. Curren ...

htmlcssbackground

Fuzzy background when you scroll

My container has an image that blurs when you scroll down the page by 50 pixels. I feel like I've seen this effect somewhere before, but I can't quite recall where. I want the text to remain unaffected and not turn blue. Here is the HTML: <d ...

javascriptjqueryhtmlcss

Receive the anticipated delay

I am in need of checking if an element disappears from the page. The following code has been effective for me: def checkAvailability timeout = 10 wait = Selenium::WebDriver::Wait.new(:timeout => timeout) begin wait.until { $browser ...

rubyseleniumwebtest

Tips for placing an element in the top left corner and turning it into a functional "back to top" button

I need to add a "back to top" button on my website and I want to place it in the top left corner, as shown in the image above. Here is the HTML code I am using in my Jekyll site: <body> <a name="top"></a> <a href="#top" id="to ...

jqueryhtmlcss

Generating text that remains in a fixed position while the page is being scrolled through, until it reaches a designated

I am attempting to replicate the scrolling effect seen on this webpage: The text follows the scroll direction and then halts at a specific point as you continue down the page. Could someone provide guidance on how to achieve this same effect? Thank you ...

javascriptjqueryhtmlcss

Div with headers that stick to the top and stack when scrolling

I am working on creating a lengthy scrollable list of grouped items where the group titles remain visible at all times (stacked). When a user clicks on a group header, the page should scroll to the corresponding items. I have successfully used the positio ...

javascriptcsssticky

How can I incorporate a fade opacity effect into my Div scrolling feature?

I successfully implemented code to make div elements stick at the top with a 64px offset when scrolling. Now, I am trying to also make the opacity of these divs fade to 0 as they scroll. I am struggling to figure out how to achieve this effect. Below is ...

javascriptcss

HTML: Dealing with issues in resizing and resolution with floating elements on the left and right using

Encountering some issues with the HTML code below when resizing the window: 1: The right bar suddenly drops down if the width is made too small. 2: The spacing between the content and the right bar expands as the window width increases. <style ty ...

htmlcss

Creating visually appealing tables in React.js

Having trouble with table rendering in React. The buttons in the table cell are not styled properly and do not center within their div. Additionally, the table border is cut off where there are buttons or empty headers. Need help figuring out what's g ...

javascriptcsswebreactjsstyling

The relationship between parent and child elements in CSS

Recently on Stack, I came across a question that was answered correctly. The query was about how to target the first two li elements after each occurrence of .class1. <ul> <li>Something</li> <li class="class1">Important</li ...

htmlcsscss-selectors

The confirm() function shows up before the background on a blank layout

I'm facing an issue where whenever my confirm() function pops up, the alert box displays correctly but then the background turns blank. I've tried various solutions like moving the entire if statement to the bottom of the page or at the end of th ...

javascriptphphtmlcss