Delivering individual CSS files instead of grouped together

Is there an efficient way in Phoenix to serve the CSS file individually instead of combining them? I find it inefficient to send all the unnecessary CSS code from other pages when only one page is being viewed. This can also result in style conflicts if not managed properly.

Directory Structure of Static Folder:

static
- css
-- list.css
-- detail.css

Upon running "mix phoenix.server," I noticed that my list.html page is receiving an "app.css" file containing styles from both list.css and detail.css. I would prefer to only deliver the styles from list.css for the list.html page to avoid sending excess data.

csselixirphoenix-framework

Answer №1

To include your CSS files directly in the priv/static/css folder, simply avoid placing them inside the web/static/ directory.

This approach requires you to call each file individually from your HTML code, similar to how it's done with raw HTML. It's important to note that these files will be served as is, without any Brunch optimization, unless you decide to configure Brunch for that purpose (if desired).

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

The PNG logo will display with white borders when viewed on Internet Explorer 9

My current project involves developing an asp.net mvc web application. In the upper top navigation bar, we have a blue area where I am trying to display our logo using the code snippet below: <a class="brand" href="~/Home/Index/"> <img alt="Group ...

htmlcsslayout

The grid expands to cover the entire width of the browser

Hello everyone, I am a newbie when it comes to JavaScript and CSS. I am in need of a code, whether it be JavaScript or CSS, that will allow me to stretch out a grid layout measuring 5 x 2 along with pictures to completely cover the width of the browser wi ...

javascripthtmlcssdrupal

Troubleshooting Symfony2 and Assetic: Why are my CSS-linked images not loading?

I've encountered an issue with my CSS sprite sheet that my CSS file seems unable to locate the image. Despite following the provided solution here, I'm still facing the same problem. The directory structure of my bundle is as follows: src/ v ...

csssymfonycss-spritesassetic

The height of the links is too tall for the grid layout

I'm currently working on incorporating an RSS feed into a grid layout within a div, but unfortunately, they don't seem to be aligning perfectly. Check out my Website Here is the CSS code I am using: #rss-5 ul { display: grid; grid-template-col ...

htmlcssgrid

Achieving the perfect column spacing in Bootstrap 4 without exceeding the available space

My goal is to design 3 columns of content with a touch of space between each, giving them a distinctive appearance when using a shadow effect. However, the issue arises when I apply some margin with 'mr-3' to the left and middle columns, causing ...

csstwitter-bootstrapbootstrap-4

Centered offsetting with Bootstrap 4

I am looking to create a column that is centered on the page, with another column slightly offset from it, without affecting the center alignment. <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="styl ...

htmlcssbootstrap-4

The getimagesize functionality seems to be malfunctioning

I have developed a function that resizes images to fit as a background image for a div. I provide the function with the div size and the image path. It works perfectly when the height is larger than the width, but it fails when the width is larger than the ...

phphtmlcss

Styling the nested list items with text decoration

I have a scenario where I applied text-decoration: underline; to the parent li, which is being inherited by the child li. Despite trying to remove this style from the child elements using text-decoration: none !important;, it doesn't seem to work. The ...

htmlcsshtml-lists

Is there a way to limit the height of the tbody element?

I need to set a max-height rule for a table's tbody with overflow set to auto, so that a scrollbar only appears when the table exceeds a certain height. Is there a way to restrict the height of a tbody element within a table in this manner? The tabl ...

jqueryhtmlcsstwitter-bootstrapstylesheet

What is the best way to extract information from an XML file using JQUERY and present it neatly in a table format

I am looking to populate a table with data from an XML file as shown below: <table> <th>Head 1</th><th>Head 2</th><th>Head 3</th> <tr><td></td><td></td><td></td></tr> ...

htmljquerycssxml

The border in my HTML table is not displaying when I run my flask application

My flask application was running smoothly in a virtual environment until I encountered an issue with the html borders not showing up. Even after seeking help from a friend who knows some html, the problem still persists. app.py: from flask import Flask, r ...

pythonhtmlcssflaskvirtualenv

Keep image height consistent and prevent resizing

I've hit a roadblock while trying to find a solution for this issue. There must be an easy fix that I'm overlooking... The problem arises when viewing the table with flags on a small screen (on mobile) - the image on the left seems to get sligh ...

javascripthtmlcss

Implement a vertical scrollbar when the page exceeds a specific height

I've been combing through Google for a solution with no luck. I'm dealing with absolute content positioning and I'm looking to implement a scrollbar only when the browser window reaches a certain size. This website is fullscreen, so I don&ap ...

htmlcss

jQuery show/hide functionality allows you to toggle the visibility of elements

I am looking to create a toggle button that expands the menu-wrapper width and hides the sidebar when clicked. Here is the initial CSS styling: #my-wrapper { Width:500px; } #sidebar-wrapper { width:200px; } Upon clicking the button, the CSS will update ...

javascriptjqueryhtmlcss

Ways to create distance between elements within a row

Trying to align 3 cards in a row within an angular 10 project has been challenging. While the cards line up horizontally on mobile devices, I'm struggling to create proper spacing between them on desktop. I've attempted adjusting margins and padd ...

htmlcssangulartwitter-bootstrapbootstrap-4

Oops! Looks like we hit a roadblock trying to access the file at ../src/web/views/index.htm. The system

Encountering some peculiar file path issues in my Go project. Here's how the file structure is laid out: C:/ProjectName/ -------------->bin/ -------------->pkg/ -------------->src/web/ ---------------------->main.go ---------------------- ...

htmlcssgofilepath

Displaying outcomes in dialog box when button is pressed

I am working on a website where I want to enhance the user experience by displaying output in a dialogue box upon click. The current setup involves the user selecting a vendor and time duration, with the results appearing below the Submit button. However, ...

javascripthtmlcssdjango

A distinctive web page featuring an engaging image backdrop: captivating content effortlessly scrolling beneath

On my website, I have implemented a background image with a fixed transparent header. When scrolling down, I want the main content to be hidden beneath the header. To achieve this effect, I used the -webkit-mask-image property. However, this approach affec ...

htmlcssimagescrolltransparency

Tips for adding style to the first list element and first children using jQuery

Looking at the following markup: <ul> <li> // this <ul> <li> <div></div> </li> <li> <div></div> </li> </ul> </li> <li> ...

javascriptjqueryhtmlcss

Simple method for displaying or hiding divs depending on the status of a selected radio button using CSS only

I am currently working on showing or hiding div elements based on the status of a radio button. These divs are located after the input buttons in a different section of the page, and I am facing challenges in referencing them accurately. This code is for ...

cssradio-buttonshow-hidechecked