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: {
scripts: {
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. 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!
