Sass files not compiling on Phoenix Framework

Hi, I am new to front-end Phoenix framework and trying to implement Sass, however the “priv/static/css/app.css” is not compiling using “web/static/css/app.scss”. My app.css.map file looks like this:

{"version":3,"sources":"web/static/css/app.scss","names":[],"mappings":"","file":"priv/static/css/app.css"}

and my brunch.config file looks like this:

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
      // https://github.com/brunch/brunch/blob/stable/docs/config.md#files
      // joinTo: {
      //  "js/app.js": /^(web\/static\/js)/,
      //  "js/vendor.js": /^(web\/static\/vendor)|(deps)/
      // }
      //
      // To change the order of concatenation of files, explicitly mention here
      // https://github.com/brunch/brunch/tree/master/docs#concatenation
      // order: {
      //   before: [
      //     "web/static/vendor/js/jquery-2.1.1.js",
      //     "web/static/vendor/js/bootstrap.min.js"
      //   ]
      // }
    },
    stylesheets: {
      joinTo: "css/app.css"
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

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

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: [
      "web/static",
      "test/static"
    ],

    // Where to compile files to
    public: "priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/web\/static\/vendor/]
    }
    sass: {
      options: {
        includePaths: ['web/static/vendor/bootstrap-sass/assets/stylesheets']
      }
    }
  },

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

  npm: {
    enabled: true,
    // Whitelist the npm deps to be pulled in as front-end assets.
    // All other deps in package.json will be excluded from the bundle.
    whitelist: ["phoenix", "phoenix_html"]
  }
};

I also get an error when I run node node_modules/brunch/bin/brunch build:

25 Apr 09:06:33 - error: Initialization error - SyntaxError: Unexpected identifier
  at exports.runInThisContext (vm.js:53:16)
  at Module._compile (module.js:387:25)
  at Object.Module._extensions..js (module.js:422:10)
  at Module.load (/Users/dara.carolan/Sites/tomcat/node_modules/coffee-script/lib/coffee-script/register.js:45:36)
  at Function.Module._load (module.js:314:12)
  at Module.require (module.js:367:17)
  at require (internal/module.js:20:19)
  at Promise.then.config (/Users/dara.carolan/Sites/tomcat/node_modules/brunch/lib/application.js:458:18)
  at Object.keys.forEach.environments.forEach.Object.keys.map.exports.install.exports.replaceConfigSlashes.Object.keys.forEach.types.map.type.map.joinTo.map.types.forEach.exports.setConfigDefaults.Object.keys.forEach.normalized.paths.possibleConfigFiles.Object.keys.map.readComponents.then.Promise.then.obj.catch (/Users/dara.carolan/Sites/tomcat/node_modules/brunch/lib/application.js:450:10)
  at Object.keys.forEach.environments.forEach.Object.keys.map.exports.install.exports.replaceConfigSlashes.Object.keys.forEach.types.map.type.map.joinTo.map.types.forEach.exports.setConfigDefaults.Object.keys.forEach.normalized.paths.possibleConfigFiles.Object.keys.map.readComponents.then.Promise.then.exports.loadConfig.tryToLoad.then.config.then.then.then.config.then [as loadConfig] (/Users/dara.carolan/Sites/tomcat/node_modules/brunch/lib/application.js:496:10)
  at new BrunchWatcher (/Users/dara.carolan/Sites/tomcat/node_modules/brunch/lib/watch.js:75:17)
  at Promise.all.then.setProp.constructor.application.loadConfig.then.then.initCompilation.initWatcher.chokidar.watch.on.on.absPath.on.compile.assetErrors.forEach.Promise.all.then.then.watch (/Users/dara.carolan/Sites/tomcat/node_modules/brunch/lib/watch.js:341:10)
  at exports.new.start (/Users/dara.carolan/Sites/tomcat/node_modules/brunch/lib/index.js:27:10)
  at Command.listener (/Users/dara.carolan/Sites/tomcat/node_modules/commander/index.js:301:8)
  at emitTwo (events.js:100:13)
  at Command.emit (events.js:185:7)
  at Command.parseArgs (/Users/dara.carolan/Sites/tomcat/node_modules/commander/index.js:615:12)
  at Command.parse (/Users/dara.carolan/Sites/tomcat/node_modules/commander/index.js:458:21)
  at Object.keys.forEach.exports.run (/Users/dara.carolan/Sites/tomcat/node_modules/brunch/lib/cli.js:73:11)
  at loadBrunch (/Users/dara.carolan/Sites/tomcat/node_modules/brunch/bin/brunch:34:7)
  at /Users/dara.carolan/Sites/tomcat/node_modules/brunch/bin/brunch:44:5
  at FSReqWrap.oncomplete (fs.js:82:15)

I a junior and new to Phoenix, so apologies if I have make a silly mistake, any advice would be great, thanks!

1 Like

Can you show your package.json file contents?

1 Like

Hi, thanks for your reply, here it is:

{
  "repository": {},
  "dependencies": {
    "babel-brunch": "~6.0.0",
    "brunch": "^2.1.3",
    "clean-css-brunch": "~1.8.0",
    "css-brunch": "~1.7.0",
    "javascript-brunch": "~1.8.0",
    "phoenix": "file:deps/phoenix",
    "phoenix_html": "file:deps/phoenix_html",
    "sass-brunch": "^1.9.2",
    "uglify-js-brunch": "~1.7.0"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.6.0"
  }

}

Thanks for your help.

Have you tried moving sass-brunch closer to the top of your dependencies?

Hi, I just tried moving sass-brunch under brunch in package.json, but no change unfortunately, still not compiling, but thanks for the reply :slight_smile:

ok, basically I started again, and don’t have the error anymore, however, the brunch build doesn’t finish compiling, it just says “compiling …” for over 40 minutes. Any advice would be great, thanks.

Could anyone point me towards a step-by-step for changing a phoenix app using CSS, to one using SCSS, using brunch, rather than webpack or anything else? I can find little bits on the subject, but I’m missing something along the way. Thanks for any advice!

Just in case anyone else has this issue, I changed the sass-brunch line in the package.json file from "sass-brunch": "^1.8.10", to "sass-brunch": "^2.0.0", and then ran npm install without any errors and the scss compiled :grinning:

2 Likes

Hey guys.
I upped the version on sass-brunch like Daraclare shows but my .sass files don’t seem to compile.

My package.json looks like:

{
  "repository": {},
  "dependencies": {
    "babel-brunch": "~6.0.0",
    "brunch": "~2.1.3",
    "clean-css-brunch": "~1.8.0",
    "css-brunch": "~1.7.0",
    "javascript-brunch": "~1.8.0",
    "phoenix": "file:deps/phoenix",
    "phoenix_html": "file:deps/phoenix_html",
    "sass-brunch": "^2.0.0",
    "uglify-js-brunch": "~1.7.0"
  }
}

When running the server it seems stuck on info: Compiling with no further feedback

EDIT: Never mind, just waited a few minutes while getting ac cup of coffee, when I came back to my desk the application was magically compiled somehow. editing files doesn’t seem to cause long waiting times either. Thanks guys!

1 Like