`@import` of bootstrap with `ember-cli-less` fails #133

huafu · 2016-09-12T01:03:15Z

I've just setup a new ember project, added ember-cli-less, ember-font-awesome and this addon. The font-awesome import does work, but importing the bootstrap-less/bootstrap does not.
I've looked into your code and debugged ember serve, sounds like the detection of ember-cli-less is ok and includes bower_components/bootstrap/less in the trees.
Now I am out of ideas where to look and that has been too long I did not write anything ember-addon related... can't figure out why the less thing isn't working.

Here is what I did (I yet did not created/changed any other file):

$ ember new bnh-router
$ ember install ember-cli-less
$ ember install ember-moment
$ ember install ember-font-awesome
$ ember install ember-bootstrap

I remove app/styles/app.css and created app/styles/app.less as so:

// app.less
@import "ember-bootstrap/bootstrap";
@import "ember-bootstrap/theme";

@import "font-awesome";

Here is the error I got:

$ ember serve

Just getting started with Ember? Please visit http://localhost:4200/ember-getting-started to get going

Livereload server on http://localhost:49152
Serving on http://localhost:4200/
FileError: 'ember-bootstrap/bootstrap.less' wasn't found. Tried - /home/huafu/Projects/bnh-router/tmp/less_compiler-input_base_path-XvM8YpAS.tmp/0/app/styles/ember-bootstrap/bootstrap.less,/home/huafu/Projects/bnh-router/tmp/less_compiler-input_base_path-XvM8YpAS.tmp/0/app/styles/ember-bootstrap/bootstrap.less,bower_components/font-awesome/less/ember-bootstrap/bootstrap.less,ember-bootstrap/bootstrap.less in /home/huafu/Projects/bnh-router/tmp/less_compiler-input_base_path-XvM8YpAS.tmp/0//app/styles/app.less on line 2, column 1:
1 // app.less
2 @import "ember-bootstrap/bootstrap";
3 @import "ember-bootstrap/theme";

File: /home/huafu/Projects/bnh-router/tmp/less_compiler-input_base_path-XvM8YpAS.tmp/0//app/styles/app.less (2)
The Broccoli Plugin: [LessCompiler] failed with:
undefined

The broccoli plugin was instantiated at: 
    at LessCompiler.Plugin (/home/huafu/Projects/bnh-router/node_modules/ember-cli-less/node_modules/broccoli-less-single/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31)
    at LessCompiler.CachingWriter [as constructor] (/home/huafu/Projects/bnh-router/node_modules/ember-cli-less/node_modules/broccoli-less-single/node_modules/broccoli-caching-writer/index.js:18:10)
    at new LessCompiler (/home/huafu/Projects/bnh-router/node_modules/ember-cli-less/node_modules/broccoli-less-single/index.js:15:17)
    at /home/huafu/Projects/bnh-router/node_modules/ember-cli-less/index.js:28:12
    at Array.map (native)
    at LESSPlugin.toTree (/home/huafu/Projects/bnh-router/node_modules/ember-cli-less/index.js:24:34)
    at /home/huafu/Projects/bnh-router/node_modules/ember-cli/node_modules/ember-cli-preprocess-registry/preprocessors.js:184:26
    at Array.forEach (native)
    at processPlugins (/home/huafu/Projects/bnh-router/node_modules/ember-cli/node_modules/ember-cli-preprocess-registry/preprocessors.js:182:11)
    at module.exports.preprocessCss (/home/huafu/Projects/bnh-router/node_modules/ember-cli/node_modules/ember-cli-preprocess-registry/preprocessors.js:152:10)

My package.json `devDependencies`:

{
    "broccoli-asset-rev": "^2.4.2",
    "ember-ajax": "^2.0.1",
    "ember-bootstrap": "0.9.1",
    "ember-cli": "2.8.0",
    "ember-cli-app-version": "^1.0.0",
    "ember-cli-babel": "^5.1.6",
    "ember-cli-dependency-checker": "^1.2.0",
    "ember-cli-htmlbars": "^1.0.3",
    "ember-cli-htmlbars-inline-precompile": "^0.3.1",
    "ember-cli-inject-live-reload": "^1.4.0",
    "ember-cli-jshint": "^1.0.0",
    "ember-cli-less": "1.5.3",
    "ember-cli-moment-shim": "2.0.0",
    "ember-cli-qunit": "^2.1.0",
    "ember-cli-release": "^0.2.9",
    "ember-cli-sri": "^2.1.0",
    "ember-cli-test-loader": "^1.1.0",
    "ember-cli-uglify": "^1.2.0",
    "ember-data": "^2.8.0",
    "ember-export-application-global": "^1.0.5",
    "ember-font-awesome": "2.2.0",
    "ember-load-initializers": "^0.5.1",
    "ember-moment": "7.0.0-beta.3",
    "ember-resolver": "^2.0.3",
    "ember-welcome-page": "^1.0.1",
    "loader.js": "^4.0.1"
}

My bower.json `dependencies`:

{
    "ember": "~2.8.0",
    "ember-cli-shims": "0.1.1",
    "bootstrap": "~3.3.5",
    "font-awesome": "~4.5.0"
}

Versions

$ node -v
v6.2.2

$ npm -v
3.10.7

$ ember -v
ember-cli: 2.8.0
node: 6.2.2
os: linux x64

The text was updated successfully, but these errors were encountered:

simonihmig · 2016-09-12T17:39:43Z

Looks good to me, no idea why that fails... do you have this available on a public repo?

simonihmig · 2016-10-20T18:17:18Z

Just had a fresh new app setup this way without problems. As there is missing feedback and no way to reproduce, I will close this for now.

maxkoryukov · 2017-03-28T06:55:30Z

A little bit more info.

It is enough to edit ember-cli-build.js , by adding paths for less:

module.exports = function(defaults) {
	const app = new EmberApp(defaults, {
		'lessOptions': {
			paths: [
				'.',
				'node_modules',
			]
		},
// ....
}

And the error will appear. If you will delete paths option - the error will dissappear;)

maxkoryukov · 2017-03-28T06:56:50Z

Ping @simonihmig to open/reconsider the bug, if it is possible ;)

I tried to understand, what is going on, but seems like I need to understand how Ember build works in details

maxkoryukov · 2017-03-28T07:07:49Z

Another one finding: any other plugin could break the build.

I just added ember-font-awesome and tried to enable less import for that package:

module.exports = function(defaults) {
	const app = new EmberApp(defaults, {
		'ember-font-awesome': {
			useLess: true,
		},

And got the same error:

FileError: 'ember-bootstrap/bootstrap.less' wasn't found.
Tried - 
/home/x/my-project/tmp/less_compiler-input_base_path-v60VzZJ6.tmp/0/app/styles/ember-bootstrap/bootstrap.less,
/home/x/my-project/tmp/less_compiler-input_base_path-v60VzZJ6.tmp/0/app/styles/ember-bootstrap/bootstrap.less,
/home/x/my-project/node_modules/font-awesome/less/ember-bootstrap/bootstrap.less,
ember-bootstrap/bootstrap.less
in /home/x/my-project/tmp/less_compiler-input_base_path-v60VzZJ6.tmp/0//app/styles/app.less on line 26, column 1:
25 
26 @import "ember-bootstrap/bootstrap";
27 //@import "font-awesome";

As you could see - @import "font-awesome" is commented! The error caused by importing the bootstrap asset..

simonihmig · 2017-03-28T07:11:12Z

Will have a look. Looks as if something changes with the paths that Less uses to look for files to import, so it won't find bootstrap...

maxkoryukov · 2017-03-28T09:30:24Z

I could try to fix, but I need an entry points (articles, post, guides...) for

ember build workflow
broccolli

If you have a good starter pack I will appreciate!

simonihmig · 2017-04-12T19:01:31Z

I investigated this a bit. It seems to me this is a bug in one of the upstream Less packages, see the PR above, that needs to be fixed there. Not much I can do in this addon for now, I think...

simonihmig · 2017-04-13T15:24:04Z

ember-cli-less 1.5.4 just got released, and should fix this!

@maxkoryukov can you confirm?

maxkoryukov · 2017-04-13T23:12:46Z

@simonihmig let me check;)

maxkoryukov · 2017-04-13T23:36:08Z

@simonihmig great, my build fixed! Thank you!

simonihmig · 2017-04-13T23:44:07Z

Cool, thanks for checking!

maxkoryukov · 2017-04-14T04:06:41Z

@simonihmig thank you! You are the real power of open-source culture;)))

huafu changed the title ~~@import of bootstrap with ember-cli-less fail~~ @import of bootstrap with ember-cli-less fails Sep 12, 2016

simonihmig closed this as completed Oct 20, 2016

simonihmig reopened this Mar 28, 2017

simonihmig added the needs investigation label Mar 28, 2017

simonihmig mentioned this issue Apr 12, 2017

Fix this.inputPaths being removed from lessOptions.paths gabrielgrant/broccoli-less-single#42

Merged

simonihmig mentioned this issue Apr 13, 2017

Bump broccoli-less-single version gpoitch/ember-cli-less#56

Merged

simonihmig closed this as completed Apr 13, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`@import` of bootstrap with `ember-cli-less` fails #133

`@import` of bootstrap with `ember-cli-less` fails #133

huafu commented Sep 12, 2016

simonihmig commented Sep 12, 2016

simonihmig commented Oct 20, 2016

maxkoryukov commented Mar 28, 2017

maxkoryukov commented Mar 28, 2017

maxkoryukov commented Mar 28, 2017 •

edited

simonihmig commented Mar 28, 2017

maxkoryukov commented Mar 28, 2017 •

edited

simonihmig commented Apr 12, 2017

simonihmig commented Apr 13, 2017

maxkoryukov commented Apr 13, 2017

maxkoryukov commented Apr 13, 2017

simonihmig commented Apr 13, 2017

maxkoryukov commented Apr 14, 2017

@import of bootstrap with ember-cli-less fails #133

@import of bootstrap with ember-cli-less fails #133

Comments

huafu commented Sep 12, 2016

Here is what I did (I yet did not created/changed any other file):

Here is the error I got:

My package.json devDependencies:

My bower.json dependencies:

Versions

simonihmig commented Sep 12, 2016

simonihmig commented Oct 20, 2016

maxkoryukov commented Mar 28, 2017

maxkoryukov commented Mar 28, 2017

maxkoryukov commented Mar 28, 2017 • edited

simonihmig commented Mar 28, 2017

maxkoryukov commented Mar 28, 2017 • edited

simonihmig commented Apr 12, 2017

simonihmig commented Apr 13, 2017

maxkoryukov commented Apr 13, 2017

maxkoryukov commented Apr 13, 2017

simonihmig commented Apr 13, 2017

maxkoryukov commented Apr 14, 2017

`@import` of bootstrap with `ember-cli-less` fails #133

`@import` of bootstrap with `ember-cli-less` fails #133

My package.json `devDependencies`:

My bower.json `dependencies`:

maxkoryukov commented Mar 28, 2017 •

edited

maxkoryukov commented Mar 28, 2017 •

edited