Brunch + Less + Bootstrap

Question

I'm using Less with Brunch and I can't get my boostrap/font-awesome plugins to work. My goal is to use Bootstrap and Font-Awesome as a node module.

exports.config = {
   // See http://brunch.io/#documentation for docs.
     files: {
       javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css",
     order: {
       after: ["web/static/css/app.less"] // concat app.css last
     }
    },
    templates: {
      joinTo: "js/app.js"
    }
  },
  conventions: {
    assets: /^(web\/static\/assets)/
  },

  // Phoenix paths configuration
  paths: {
    public: "../priv/static"
  },

  // Configure your plugins
  plugins: {
    babel: {
        presets: ["env", "react"],
      ignore: [/(web\/static\/vendor)|node_modules/]
    },
    less: {
      options: {
        paths: ["node_modules/font-awesome/less", "node_modules/bootstrap/less"]
       }
     },
     copycat: {
       "fonts" : ["static/fonts", "node_modules/font-awesome/fonts"],
       verbose : false, 
       onlyChanged: true 
     }
  },

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

  npm: {
    enabled: true,
    globals: {
        $: 'jquery',
        jQuery: 'jquery',
        React: 'react',
        bootstrap: 'bootstrap',
        Tether: 'tether',
        Popper: 'popper.js',
      },
   }
   }

and my app.less file has imports:

@import 'font-awesome';
@import "bootstrap.less";

but I keep getting the errorbootstrap.less' wasn't found. How can I fix this?

Answer 1

I switched to sass, which made it a lot easier...this problems remains however.