How to prioritize app.css over phoenix.css?

Phoenix Forum Questions / Help
,
1

I am trying to edit some span tags but the phoenix.css file overwrites my app.css styles or even my inline css, if I add the !important tag.
it happens for color and background color.

Why is that?

2

phoenix.css is imported at the top of app.css, so anything you define after should override. Note you can also delete phoenix.css if you are using your own stylesheets as it exists only for our default out-of-the-box styles.

1 Like
3

hm, I checked the digested code and my app.css is on top not the phoenix.css
Also it kinda workes for me the default one, just I would need some slight changes.

4

Is this a 1.3 app w/ brunch, or 1.4-rc with webpack?

5

i have brunch

6

Quick fix - this seems to work in the app/assets/brunch-config.js:

From

    stylesheets: {
      joinTo: "css/app.css"
    },

to

    stylesheets: {
      joinTo: {
        "css/app.css" : [
          "css/phoenix.css",
          "css/app.css"
        ]
      }
    },

read:
Create ../priv/static/css/app.css by joining ./css/phoenix.css and ./css/app.css.

5 Likes