ember-power-select
ember-power-select copied to clipboard
Published
20 hours ago •
cibernox
cibernox
error when importing EPS sass file into an app sass file within a subdirectory
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 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,
},
});
...