ember-cli-sass icon indicating copy to clipboard operation
ember-cli-sass copied to clipboard

Custom directory with includePaths

Open RobbieTheWagner opened this issue 8 years ago • 17 comments

Is there a way to include a common-styles folder? Everything I see is just bower_components. When I try to do common-styles I get:

The Broccoli Plugin: [SassCompiler] failed with:
Error: Attempting to watch missing directory: common-styles

RobbieTheWagner avatar Jan 30 '17 18:01 RobbieTheWagner

There's not enough information in your question for me to answer you. Where is the common-styles folder? How are you trying to add it to the Broccoli tree?

simonexmachina avatar Jan 30 '17 23:01 simonexmachina

@aexmachina apologies, I will try to add some detail for you.

common-styles is just in the root of the app, just like bower_components.

According to the docs, I would assume this would be all I need:

sassOptions: {
  includePaths: ['common-styles']
}

RobbieTheWagner avatar Jan 31 '17 02:01 RobbieTheWagner

Are you using node-sass 4.4? Does the problem go away if you pin to 4.3? Could be related to this issue: https://github.com/sass/node-sass/issues/1876

simonexmachina avatar Jan 31 '17 06:01 simonexmachina

@aexmachina no, we are on ember-cli-sass 5.6.0, so:

"name": "node-sass",
  "version": "3.13.0",
  "libsass": "3.3.6",

Is it supposed to work with any directories I throw at it? I assumed it only worked with bower_component or node_modules because Broccoli already knows about those or something.

I'm looking for guidance on the correct way to do a custom directory.

RobbieTheWagner avatar Jan 31 '17 13:01 RobbieTheWagner

So I installed the local directory with npm and with it in node_modules, I can add it to includePaths. However, @import 'common-styles'; only works in addon.scss and not app.scss.

RobbieTheWagner avatar Feb 01 '17 16:02 RobbieTheWagner

@rwwagner90 you're still not giving me the information that I've asked for:

  • Where is the common-styles folder?
  • How are you trying to add it to the Broccoli tree?
  • [email protected] is very old, I don't know why you'd have such an old version

I would suggest you rm -rf node_modules and upgrade ember-cli-sass to the latest version.

simonexmachina avatar Feb 02 '17 06:02 simonexmachina

@aexmachina I did give you the information you asked for, if you look back a couple comments. I will post again:

  • common-styles is just in the root of the addon, just like bower_components.
  • I am using includePaths as stated by the docs, no custom broccoli stuff, if I need custom stuff to get it included, we should document that. includePaths makes it sounds like that's all we need.
  • I'm using the version in ember-cli-sass 5.6.0, we're stuck on that version to be compatible with flexi for now.

I cannot use the latest version, and I shouldn't need to, unless this was broken for ember-cli-sass 5.6.0.

Ideally, I could move this directory outside all apps and addons, but unsure how I would then make broccoli aware of it.

Regardless of my setup, if you could please tell me if including custom directories should work and how I should do it, that's what I'm looking for here.

RobbieTheWagner avatar Feb 02 '17 12:02 RobbieTheWagner

Okay. Adding common-styles to the includePaths array should work:

// ember-cli-build.js
    sassOptions: {
      includePaths: [
        'testDir',
// app/styles/app.scss
@import 'testDir/test';
// testDir/test.scss
body {
  color: red;
}

I've just tried this with node-sass 4.5 and it works for me.

$ npm ls node-sass ember-cli-sass
[email protected]
│ └─┬ [email protected]
│   └── [email protected]

simonexmachina avatar Feb 06 '17 05:02 simonexmachina

@aexmachina try it in an addon, does not seem to work for me. Should it work if the folder is in the root of the addon or outside of the directory entirely or must it be inside?

RobbieTheWagner avatar Feb 06 '17 14:02 RobbieTheWagner

I see. Sorry, I don't know what the solution is when used in an addon.

simonexmachina avatar Feb 07 '17 00:02 simonexmachina

@aexmachina I would expect it to be some sort of different broccoli tree or something. I don't know much about broccoli.

RobbieTheWagner avatar Feb 07 '17 17:02 RobbieTheWagner

What about trying includePaths: ['node_modules/your-addon-name/common-styles']?

simonexmachina avatar Feb 09 '17 04:02 simonexmachina

I'm having the same issue with an engine (which is technically an addon so that makes sense).

The includePaths works well in an regular ember-cli project and I have had success in the past with it. To the best of my knowledge it does not work in an addon.

@aexmachina I've tried the includePaths with the node_modules/addon-name/addon/pods to no avail.

DegreeDev avatar Mar 08 '17 21:03 DegreeDev

Somebody really should look into this and work out a solution for the community. Unfortunately I'm just not that person, for a variety of reasons. Anyone want to take this on? @dukex @stefanpenner?

simonexmachina avatar Mar 08 '17 23:03 simonexmachina

@DegreeDev can confirm it doesn't work in addons or engines.

RobbieTheWagner avatar Mar 10 '17 18:03 RobbieTheWagner

Probably need some special broccoli magic for addon and engine trees.

RobbieTheWagner avatar Mar 10 '17 18:03 RobbieTheWagner

https://github.com/ember-cli/ember-cli/issues/9639 may be related (see investigation details)

lifeart avatar Sep 28 '21 22:09 lifeart