Using Django and Pipeline for CSS compression resulted in a 404 error when trying to access the output_filename.css file

Here is the setup for compressing css files in Pipeline:

PIPELINE_CSS = {
                'colors': {
                          'source_filenames': (
                                               '/static/css/colors/colors.css',
                                               '/static/css/colors/layout.css'
                                               ),
                          'output_filename': '/static/css/Colors.css',
                    },
                }

However, when the client attempts to access

/static/css/Colors.css with

{% load compressed %}    
{% compressed_css 'colors' %} 

a 404 error is returned, indicating that the file was not found. No files are generated in STATIC_ROOT even after running the collectstatic command.

YUI Compressor has been installed from the Synaptic Repository of my Ubuntu Lucid.

EDIT1: Other settings in settings.py:

PIPELINE_STORAGE = 'pipeline.storage.PipelineFinderStorage'

STATICFILES_STORAGE = 'pipeline.storage.PipelineStorage'

PIPELINE=True

In middleware classes:

'django.middleware.gzip.GZipMiddleware',

'pipeline.middleware.MinifyHTMLMiddleware',

STATICFILES_FINDERS = ( 'django.contrib.staticfiles.finders.FileSystemFinder', 'django.contrib.staticfiles.finders.AppDirectoriesFinder', # 'django.contrib.staticfiles.finders.DefaultStorageFinder', )

STATICFILES_DIRS = ( "/home/my/eclipse/myproject/static/", )

STATIC_URL = '/static/'

STATIC_ROOT = '/home/my/eclipse/myproject/static2/'

Answer №1

It is important to utilize relative paths when sourcing files because the pipeline relies on the staticfiles app to locate these files.

To learn more about managing staticfiles in Django, check out the official documentation.

Answer №2

When collectstatic is executed, what will be the final output?

I have observed that it directs the output to /tmp instead of STATIC_ROOT.

The issue appears to be resolved by eliminating these two lines:

PIPELINE_STORAGE = 'pipeline.storage.PipelineFinderStorage'
STATICFILES_STORAGE = 'pipeline.storage.PipelineStorage' 

(By the way, the syntax has been updated to {% load pipeline %} {% stylesheet 'colors' %})

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

Admin panel in Django does not have static data when using Nginx and Docker

I am facing an issue while trying to run my django app in a Docker container (using nginx, gunicorn, etc.) on my local machine. Everything seems to be working fine, but I am not able to see the static data. The error that I see in the docker logs is as fol ...

Looking to incorporate two @return statements in a Sass function

I have a very straightforward Sass function that converts a pixel value to a rem value: @function to-rem($pxval) { @return #{$pxval / $base-font-size}rem; } For example, using to-rem(24) would output 1.5rem. However, I recently ran into an issue whe ...

Step by step guide on inserting a message (memo/sticky note) onto an HTML page

Wondering how to accomplish this: I've designed an HTML5 homepage and I'm looking to display a message to visitors, such as "Dear visitor, I am currently on vacation from....", in the form of a memo or sticky note positioned in the top right cor ...

5 Distinctive Text Color Selection Classes in Bootstrap

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="https: ...

Adjust the CSS within a <style> element using jQuery or javascript

What I aim to accomplish: I intend to dynamically add and modify rules within a <style> tag using JavaScript/jQuery. Reason behind this goal: I am in the process of creating a color scheme editor where changes made by the user should be reflected ...

Combining Django Templates and Vue.js

I am currently working on integrating Vue components into Django templates. The initial setup went smoothly, however, I am facing an issue with a component that requires its own import. Here is the component (vue/dropdown.html): <div id="app" ...

When inline-block elements wrap onto a new line, they expand to full width

Upon my realization, an inline-block element will expand to 100% width if there are more child elements than can fit on one line: <div style="background-color:red;padding:5px"> <div style="display:inline-block;background-color:green;padding:5 ...

How to position a div in the center on top of a full-width slideshow using CSS

I am facing a challenge with positioning the banner slideshow controls div in the middle of the screen on top of a full-width slideshow. The main container's width is set to 100%, which is causing issues with centering the controls div. I have attemp ...

Find and retrieve all data attributes with JavaScript

What is the method to retrieve all data-attributes and store them in an array? <ul data-cars="ford"> <li data-model="mustang"></li> <li data-color="blue"></li> <li data-doors="5"></li> </ul> The resultin ...

How can I create a thumbnail rectangle and wrap item text with Ionic framework?

Just diving into Ionic and I have a quick query that's not covered in the documentation. Is there a straightforward way to utilize Ionic classes to left-align content currently positioned below an image? The code snippet I'm working with looks ...

Web design featuring an aesthetic reminiscent of an open folder on an iPhone

I'm struggling a bit and could really use some assistance. I've been searching for a long time but can't seem to figure out how to create an iPhone folder-like design for the web. The design should have that "slide out" effect when you click ...

Keep the CSS Grid cell blank without explicitly defining the position of other elements

I am trying to have an icon with a specific class element positioned in the center in relation to the first row, while skipping a cell in the second row's first column. Is there a way to skip that cell without explicitly specifying the grid-column po ...

Creating and uploading images using Django templates

Hey everyone, I have a template that can edit my data in the database. However, when I attempt to upload an image from the template, it fails. Can anyone provide guidance on how to code it correctly so it works well? Thank you. models.py from django.d ...

Removing Delivery Address and Method From Checkout Page in OpenCart 2

Is there a way to remove "Step 2, Step 3: Billing Details" from the Checkout Page in OpenCart 2.0? I have searched for solutions online but haven't found one specifically for OpenCart 2.0. This is what I tried: <div class="panel panel-default" s ...

CSS: Creative ways to switch up background hues within a grid layout

Im working on a project with a similar layout to this https://i.sstatic.net/okRL1.png I am trying to achieve a chessboard effect in my grid layout, where the last element of one row has the same background color as the first element of the next row. I h ...

Two divs positioned on the left side and one div positioned on the right side

Hey there, I am attempting to align 2 divs on the left side with one div on the right. #div1 #div2 #div1 #div2 #div3 #div2 #div3 #div3 The challenge is to have #div2 positioned between #div1 and #div3 when the browser window is resized smaller. Currentl ...

Django's post-login redirect is stuck in a continuous loop

I am facing an issue with my Django 1.9 and MongoDB setup. I have a custom user model and a webpage for uploading files. The upload functionality is working fine, but now I need to make that page login protected. When I try to access https://localhost/upl ...

Understanding the positioning of HTML elements using CSS

If you have the HTML snippet below: ... <fieldset> <div>above or below</div> <div>content</div> </fieldset> ... Is there a way to use CSS to position the <div>above or below</div> above or below the < ...

Struggling to make the CSS :not() selector function correctly as needed

I've been struggling to make the CSS :not() selector work in a specific way and despite searching for solutions, I haven't been successful. I came across some helpful resources like this page, but I couldn't figure it out on my own. Hopefull ...

What steps are needed to include an additional field in the authentication user model within the Django admin interface?

Looking to make some changes to my current authentication user model. Does anyone have the specific command or code to implement the solution? ...