search

cibernox / ember-power-select

The extensible select component built for ember.
http://www.ember-power-select.com
Other
540 stars 377 forks source link

error when importing EPS sass file into an app sass file within a subdirectory #1357

Open gabrielgrant opened 4 years ago

gabrielgrant commented 4 years ago

I'm trying to create an instance of a power select inside a component that has different styles from the master power-select that I import and use elsewhere in my app. So it seemed like it should be fairly straightforward to define some sass vars in the components' scss file (which lives within the app/styles/components sub-dir) and import the power-select sass from there, scoped to the component's wrapper's class.

If I @import "ember-power-select"; from my root app.scss (whether globally scoped, or scoped to this component's class) it works fine, but moving the same component-scoped code to this file contained in a subdirectory fails with:

Sass Syntax Error (SassCompiler) in /tmp/broccoli-2903pyDaI3U7XFmy/out-352-broccoli_merge_trees_full_application//app/styles/components/location-selector.scss:12:13

Error: Can't find stylesheet to import.

12 │     @import "ember-power-select";                                                                                  
   │             ^^^^^^^^^^^^^^^^^^^^                                                                                      ╵                                                                                                                      /tmp/broccoli-2903pyDaI3U7XFmy/out-352-broccoli_merge_trees_full_application/app/styles/components/location-selector.scss 12:13  @import                                                                                                        /tmp/broccoli-2903pyDaI3U7XFmy/out-352-broccoli_merge_trees_full_application/app/styles/app.scss 18:9                            root stylesheet                                                                                                                                                                                                                                              

Stack Trace and Error Report: /tmp/error.dump.f70bef9f7ab6ab565528cc198b64e06e.log
Full stack trace and error report output: ``` $ cat /tmp/error.dump.f70bef9f7ab6ab565528cc198b64e06e.log ================================================================================= ENV Summary: TIME: Sun Apr 19 2020 01:58:13 GMT-0700 (Pacific Daylight Time) TITLE: ember ARGV: - /home/gabriel/.nvm/versions/node/v10.16.3/bin/node - /home/gabriel/.nvm/versions/node/v10.16.3/bin/ember - serve EXEC_PATH: /home/gabriel/.nvm/versions/node/v10.16.3/bin/node TMPDIR: /tmp SHELL: /bin/bash PATH: - /home/gabriel/.nvm/versions/node/v10.16.3/bin - /usr/local/sbin - /usr/local/bin - /usr/sbin - /usr/bin - /sbin - /bin - /usr/games - /usr/local/games - /mnt/c/Program Files/WindowsApps/CanonicalGroupLimited.Ubuntu18.04onWindows_2020.1804.7.0_x64__79rhkp1fndgsc - /mnt/c/Windows/system32 - /mnt/c/Windows - /mnt/c/Windows/System32/Wbem - /mnt/c/Windows/System32/WindowsPowerShell/v1.0/ - /mnt/c/Windows/System32/OpenSSH/ - /mnt/c/Program Files/Git/cmd - /mnt/c/Program Files/Docker/Docker/resources/bin - /mnt/c/ProgramData/DockerDesktop/version-bin - /mnt/c/Users/g/AppData/Local/Microsoft/WindowsApps - /mnt/c/Users/g/AppData/Local/Programs/Microsoft VS Code/bin - /snap/bin PLATFORM: linux x64 FREEMEM: 8961355776 TOTALMEM: 16907522048 UPTIME: 220779 LOADAVG: 0.5185546875,0.57763671875,0.5859375 CPUS: - Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz - 2112 - Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz - 2112 - Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz - 2112 - Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz - 2112 - Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz - 2112 - Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz - 2112 - Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz - 2112 - Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz - 2112 ENDIANNESS: LE VERSIONS: - ares: 1.15.0 - brotli: 1.0.7 - cldr: 35.1 - http_parser: 2.8.0 - icu: 64.2 - modules: 64 - napi: 4 - nghttp2: 1.39.2 - node: 10.16.3 - openssl: 1.1.1c - tz: 2019a - unicode: 12.1 - uv: 1.28.0 - v8: 6.8.275.32-node.54 - zlib: 1.2.11 ERROR Summary: - broccoliBuilderErrorStack: Error: Error: Can't find stylesheet to import. ╷ 12 │ @import "ember-power-select"; │ ^^^^^^^^^^^^^^^^^^^^ ╵ /tmp/broccoli-2903pyDaI3U7XFmy/out-352-broccoli_merge_trees_full_application/app/styles/components/location-selector.scss 12:13 @import /tmp/broccoli-2903pyDaI3U7XFmy/out-352-broccoli_merge_trees_full_application/app/styles/app.scss 18:9 root stylesheet at Object._newRenderError (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:13621:19) at Object._wrapException (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:13467:16) at _render_closure1.call$2 (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:76994:21) at _RootZone.runBinary$3$3 (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:25521:18) at _RootZone.runBinary$3 (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:25525:19) at _FutureListener.handleError$1 (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:23975:19) at _Future__propagateToListeners_handleError.call$0 (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:24271:40) at Object._Future__propagateToListeners (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:3500:88) at _Future._completeError$2 (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:24099:9) at _AsyncAwaitCompleter.completeError$2 (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:23491:12) - code: [undefined] - codeFrame: Error: Can't find stylesheet to import. ╷ 12 │ @import "ember-power-select"; │ ^^^^^^^^^^^^^^^^^^^^ ╵ /tmp/broccoli-2903pyDaI3U7XFmy/out-352-broccoli_merge_trees_full_application/app/styles/components/location-selector.scss 12:13 @import /tmp/broccoli-2903pyDaI3U7XFmy/out-352-broccoli_merge_trees_full_application/app/styles/app.scss 18:9 root stylesheet - errorMessage: /tmp/broccoli-2903pyDaI3U7XFmy/out-352-broccoli_merge_trees_full_application//app/styles/components/location-selector.scss:12:14: Error: Can't find stylesheet to import. ╷ 12 │ @import "ember-power-select"; │ ^^^^^^^^^^^^^^^^^^^^ ╵ /tmp/broccoli-2903pyDaI3U7XFmy/out-352-broccoli_merge_trees_full_application/app/styles/components/location-selector.scss 12:13 @import /tmp/broccoli-2903pyDaI3U7XFmy/out-352-broccoli_merge_trees_full_application/app/styles/app.scss 18:9 root stylesheet at SassCompiler - errorType: Sass Syntax Error - location: - column: 13 - file: /tmp/broccoli-2903pyDaI3U7XFmy/out-352-broccoli_merge_trees_full_application//app/styles/components/location-selector.scss - line: 12 - treeDir: [undefined] - message: /tmp/broccoli-2903pyDaI3U7XFmy/out-352-broccoli_merge_trees_full_application//app/styles/components/location-selector.scss:12:14: Error: Can't find stylesheet to import. ╷ 12 │ @import "ember-power-select"; │ ^^^^^^^^^^^^^^^^^^^^ ╵ /tmp/broccoli-2903pyDaI3U7XFmy/out-352-broccoli_merge_trees_full_application/app/styles/components/location-selector.scss 12:13 @import /tmp/broccoli-2903pyDaI3U7XFmy/out-352-broccoli_merge_trees_full_application/app/styles/app.scss 18:9 root stylesheet at SassCompiler - name: Error - nodeAnnotation: [undefined] - nodeName: SassCompiler - originalErrorMessage: Error: Can't find stylesheet to import. ╷ 12 │ @import "ember-power-select"; │ ^^^^^^^^^^^^^^^^^^^^ ╵ /tmp/broccoli-2903pyDaI3U7XFmy/out-352-broccoli_merge_trees_full_application/app/styles/components/location-selector.scss 12:13 @import /tmp/broccoli-2903pyDaI3U7XFmy/out-352-broccoli_merge_trees_full_application/app/styles/app.scss 18:9 root stylesheet - stack: Error: Error: Can't find stylesheet to import. ╷ 12 │ @import "ember-power-select"; │ ^^^^^^^^^^^^^^^^^^^^ ╵ /tmp/broccoli-2903pyDaI3U7XFmy/out-352-broccoli_merge_trees_full_application/app/styles/components/location-selector.scss 12:13 @import /tmp/broccoli-2903pyDaI3U7XFmy/out-352-broccoli_merge_trees_full_application/app/styles/app.scss 18:9 root stylesheet at Object._newRenderError (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:13621:19) at Object._wrapException (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:13467:16) at _render_closure1.call$2 (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:76994:21) at _RootZone.runBinary$3$3 (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:25521:18) at _RootZone.runBinary$3 (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:25525:19) at _FutureListener.handleError$1 (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:23975:19) at _Future__propagateToListeners_handleError.call$0 (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:24271:40) at Object._Future__propagateToListeners (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:3500:88) at _Future._completeError$2 (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:24099:9) at _AsyncAwaitCompleter.completeError$2 (/home/gabriel/repos/breaking-bread-ember/node_modules/sass/sass.dart.js:23491:12) ================================================================================= ```
Adding the include manually to my `ember-cli-build.js` does seem to let me import it ``` let app = new EmberApp(defaults, { // Add options here sassOptions: { includePaths: [ 'node_modules/ember-power-select/app/styles/' ], onlyIncluded: false } }); ```
but then fails to import ember-basic-dropdown's CSS, ``` Sass Syntax Error (SassCompiler) in /home/gabriel/repos/breaking-bread-ember/node_modules/ember-power-select/app/styles/ember-power-select.scss:3:9 Error: Can't find stylesheet to import. ╷ 3 │ @import 'ember-basic-dropdown'; │ ^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules/ember-power-select/app/styles/ember-power-select.scss 3:9 @import /tmp/broccoli-13422qM6mUxhviLrX/out-352-broccoli_merge_trees_full_application/app/styles/components/location-selector.scss 12:13 @import /tmp/broccoli-13422qM6mUxhviLrX/out-352-broccoli_merge_trees_full_application/app/styles/app.scss 18:9 root stylesheet Stack Trace and Error Report: /tmp/error.dump.4c414f30605c363bd99d0cb620764f14.log ```

unless that is manually added too. While adding these two manually does work, it doesn't seem like that should be required (or, if it is, should probably be documented somewhere)

The problem I'm hitting may be related to this Ember-CLI issue, but given there hasn't been any movement there, and that I don't see any mention of it in this repo, it seems other must not be hitting this? So quite possible I'm doing something wrong?

Haider8 commented 4 years ago

@gabrielgrant Hey, have you found out any solution to this?

gabrielgrant commented 4 years ago

@Haider8 Didn't exactly find a fix, but as I mentioned in the original issue, the issue can be worked around by manually adding the include paths to ember-cli-build.js:

...
  let app = new EmberApp(defaults, {
    // Add options here

    sassOptions: {
      includePaths: [
        'node_modules/ember-power-select/app/styles/',
        'node_modules/ember-basic-dropdown/app/styles/'
      ],
      onlyIncluded: false
    },
    sourcemaps: {
      enabled: true,
    },
  });
...