Css/phoenix.css compiled, but not written

Questions / Help
1

I added some css files from a template I bought to a phoenix project I added those files to: project_name/assets/css then I proceed to run the brunch build and ./node_modules/.bin/brunch build. I get this warn: css/phoenix.css compiled, but not written. Check your stylesheets.joinTo config.

When I try to reload the page none of the new css files are loading I get just 404s, here is my brunch_config.js file:

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js"

      // To use a separate vendor.js bundle, specify two files path
      // http://brunch.io/docs/config#-files-
      // joinTo: {
      //   "js/app.js": /^js/,
      //   "js/vendor.js": /^(?!js)/
      // }
      //
      // To change the order of concatenation of files, explicitly mention here
      // order: {
      //   before: [
      //     "vendor/js/jquery-2.1.1.js",
      //     "vendor/js/bootstrap.min.js"
      //   ]
      // }
    },
    stylesheets: {
      joinTo: {"css/app.css": /^(assets\/vendor\/css)|(deps)/ }
    },
    templates: {
      joinTo: {"js/app.js": /^(assets\/vendor\/js)|(deps)/}
    }
  },

  conventions: {
    // This option sets where we should place non-css and non-js assets in.
    // By default, we set this to "/assets/static". Files in this directory
    // will be copied to `paths.public`, which is "priv/static" by default.
    assets: /^(static)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: ["static", "css", "js", "vendor"],
    // Where to compile files to
    public: "../priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    }
  },

  modules: {
    autoRequire: {
      "js/app.js": ["js/app"]
    }
  },

  npm: {
    enabled: true
  }
};

phoenix = 1.3

2 
    stylesheets: {
      joinTo: {"css/app.css": /^(assets\/vendor\/css)|(deps)/ }
    },

This does custom css files only to reside in assets/vendor/css or deps, you have to adjust that regular expression to your path, perhaps /^(assets\/(vendor\/)?css)|(deps)/ will do already, this makes vendor optional.

3

I put these css files in project_name/assets/css the /^(assets\/vendor\/css)|(deps)/ regular expresion I copied from another post, before adding that it was just doing nothing when I was running brunch build

4

The brunch-config.js is already in the assets directory, so path to assets/css is simply:

    stylesheets: {
      joinTo: { "css/app.css" : /^(css)/ }
    },

PS:

      joinTo: { "css/app.css" : ['css/**/*.css', '../dep/**/*.css'] }

See also: Brunch pattern matching

5

Ok that is showing me now: info: compiled 20 files into 2 files, copied 32 in 11.5 sec
Which is good, but when I go to the browser I still get 404 for all the css files.

I have no clue what it’s going on now?
Thanks for all the answers guys.

6

Well, if brunch did it’s job they should all be in app.css - they wouldn’t be available separately.

7

Oh!

You can tell I new at this, thank you so much it is actually loading the styles now.
I really appreciate the help guys. awesome!

8

This thread helped me with configuration for separate css files (thank-you @peerreynders) . I thought I would share in case it would help someone else …

stylesheets: {
  joinTo: {
    "css/modernlight.css" : /^(css\/modernlight)/,
    "css/moderndark.css" : /^(css\/moderndark)/
  },

<link rel="stylesheet" type="text/css" title="modernlight" href="<%= static_path(@conn, "/css/modernlight.css") %>">
<link rel="alternate stylesheet" type="text/css" title="moderndark" href="<%= static_path(@conn, "/css/moderndark.css") %>">

Another ‘revelation’ was that the names of the .scss files in the directories was not important.

However, I’m not sure what this does

  order: {
    after: ["priv/static/css/app.scss"] // concat app.css last
  }

And more broadly I’m not confident if my strategy of having separate .css files is quite right for allowing user styling choice … but that’s nothing to do with Phoenix :slight_smile:

Thx again

1 Like