ember-cli
Sass not compiled in 3.4
Hello,
I've just upgrade a 3.3 app to 3.4.
It seems that my Sass compilation is broken in 3.4.
I'm using ember-cli-postcss and then postcss-sass & @csstools/postcss-sass to compile css, as described here:
https://github.com/jeffjewiss/ember-cli-postcss#switching-from-sass
here's my posts options block for reference:
postcssOptions: {
compile: {
extension: "scss",
enabled: true,
parser: require("postcss-scss"),
plugins: [
{
module: require("@csstools/postcss-sass"),
options: {
includePaths: ["app/styles"]
}
}
]
},
filter: {
enabled: true,
plugins: [
{
module: require("postcss-preset-env")
},
{
module: require("postcss-discard-comments")
}
]
}
},
Interestingly, I first noticed that app.css was getting compiled, but had a bunch of ember-power-select css in it (this didn't appear to be any of my custom EPS css overrides).
When I uninstalled EPS, my app.css is no longer compiled and I now get this error in console:
Build Error (PostcssCompiler) in prog/styles/app.scss#sass:1:9
File to import not found or unreadable
Stack Trace and Error Report: /var/folders/h_/f56g1wf92dsbyl2hpl47djlw0000gn/T/error.dump.ec29111b492f5ebcd2db9f0a2c822765.log
Perhaps this is really an issue in ember-cli-postcss and is related to these PRs?
https://github.com/ember-cli/ember-cli/pull/8013
https://github.com/ember-cli/ember-cli/pull/8010
I believe I am seeing the same thing, I am pretty confident the app worked with 3.4.0-beta.3 but fails in 3.4.1.
Will debug further shortly.
issue is most likely within: https://github.com/ember-cli/ember-cli/compare/v3.4.0-beta.3...v3.4.1 and i suspect it is: https://github.com/ember-cli/ember-cli/pull/8013
https://github.com/twokul/postcss-bug
Just added some labels, and confirming that we are working on the regression here. The issue seems to be introduced by some of the changes done for the packager refactors, and we are digging in that direction.
In the interim we have marked 3.3.0 as latest NPM. Stay tuned for more info as we gather more info / fixes / etc....
Just in case this helps:
I have run into this with ember-toggle and all was fine on v3.4.0-beta.3
I am using ember-cli-sass@latest
Appears the addon's styles are not making into the build.
I have a similar error, only when i want to import an addon scss file into my application from a style subdirectory.
app/styles/some-file.scss -> @import 'addon/style' OK app/styles/some-sub-folder/some-file.scss -> @import 'addon/style' NOT OK
[email protected] + [email protected] + [email protected] ([email protected])
The main issue that was reported here was fixed in #8033 and released in 3.4.2-beta.1 (so we could have another quick round of testing to confirm).
Please double check against that version for this CSS/SASS issue, and let us know if it does/doesn't fix the issue...
I have upgraded my application to [email protected] without any amelioration my issue still exists ..
@BnitoBzh I'm going to try to reproduce locally; any chance you could put a reproduction together?
I put a reproduction together https://github.com/twokul/sass-issue
it breaks indeed, but it breaks in 3.0.0 as well. could you take a look and make sure I didn't miss something?
I put a reproduction together https://github.com/twokul/sass-issue
it breaks indeed, but it breaks in
3.0.0as well. could you take a look and make sure I didn't miss something?
My reproduction works with [email protected] but not with [email protected] : https://github.com/BnitoBzh/sass-issue/tree/fail-3.4.1 https://github.com/BnitoBzh/sass-issue/tree/working-3.3.0
@twokul, i think that your reproduction is not correct because your devDepencies match with [email protected] not with [email protected] ... Please refer to my reproduction.
https://github.com/BnitoBzh/sass-issue/tree/fail-3.4.1 https://github.com/BnitoBzh/sass-issue/tree/working-3.3.0
After some tests the last commit that works for me is : https://github.com/ember-cli/ember-cli/commit/f3bf1e0d2526ff2a323eb9aae86e7c9f7b9e8d33
@BnitoBzh I pulled down https://github.com/BnitoBzh/sass-issue/tree/fail-3.4.1, changed ember-cli to 3.4.2-beta.1, npm install and was not able to reproduce, build succeeds. am I missing something?
@twokul Ok me too ! it works, but not in my real application ... I will retry tomorrow
@twokul Ok so ... i have updated my reproduction, and the issue still be present ! How ? I have created a specific addon for test : https://github.com/BnitoBzh/sass-issue-addon, and my sass-issue application use it : https://github.com/BnitoBzh/sass-issue/tree/fail-3.4.1
It works if i import my addon's sub-style file directly into my app.scss, but it does'nt work if i import my addon's sub-style file from a sub directory in my app styles...
Both are in [email protected] and [email protected] ...
Any updates on this problem?
my addon builds fine on 3.4.1 but fails starting from 3.4.2
with
Sass Syntax Error (SassCompiler) in 0//app/styles/styles/vendor/bootstrap-custom.scss:7:9
Error: Can't find stylesheet to import.
@import "../bootstrap/variables";
^^^^^^^^^^^^^^^^^^^^^^^^
As there been any movement on this (or any suggested work-around)? I seem to be running into the issue described by @BnitoBzh too -- if I @import "ember-power-select"; from my root app.scss it works fine, but doing so from a 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)
=================================================================================
FWIW, what I'm trying to accomplish is have one of my components' scss import the power-select CSS with some custom styling variables defined
