Open lambertkevin opened 3 years ago
After a period of debugging, I found that dart-sass assume that we are running in a browser(Since we set global.window
by jsdom-global
), and can't resolve files correctly(on *nix system)
sass.dart.js
var dartNodePreambleSelf = typeof global !== "undefined" ? global : window;
// if we're running in a browser, Dart supports most of this out of box
// make sure we only run these in Node.js environment
var dartNodeIsActuallyNode = !dartNodePreambleSelf.window
when running npm run test:unit
, dart-sass set includePaths
like below finally, http://localhost/
come from window.location.href
set by jsdom-global
when running npm run serve
, includePaths
is
The difference in includePath
is not the key to this bug, but it illustrates the difference in window.location.href
between node and browser, check code
dart-sass tries to load a stylesheet (not serious)
includePaths
working directory determined by window.location.href
, in our issue, it's http://localhost/
when loading a stylesheet from includePaths
on *nix, e.g. /Users/fangbinwei/issues/vue-cli-mocha-bug/src/assets/test-location/bug
. dart-sass assume it's a relative path to http://localhost/
, loading stylesheet from 'http://localhost/Users/fangbinwei/issues/vue-cli-mocha-bug/src/assets/test-location/bug'
To verify, I modified the code in @vue/cli-plugin-unit-mocha/setup.js
, and test passed, it also can solve #4053
- require('jsdom-global')(undefined, { pretendToBeVisual: true, url: 'http://localhost' })
+ const url = require('url')
+ require('jsdom-global')(undefined, { pretendToBeVisual: true, url: url.pathToFileURL(process.cwd()).href + "/" })
// https://github.com/vuejs/vue-test-utils/issues/936
window.Date = Date
// https://github.com/vuejs/vue-next/pull/2943
global.ShadowRoot = window.ShadowRoot
+global.SVGElement = window.SVGElement
I'm not sure if it's the solution of this issue, and whether this solution will cause other problems. (may affect vue-router)
but according to the code used by dart-sass, I think a better but ugly hackish workaround maybe like this
require('jsdom-global')(undefined, { pretendToBeVisual: true, url: 'http://localhost' })
process.versions.electron = ''
https://github.com/sass/dart-sass/issues/1270 https://github.com/sass/dart-sass/issues/710 https://github.com/mbullington/node_preamble.dart/issues/26 https://github.com/sass/dart-sass/issues/1294 https://github.com/dart-lang/sdk/issues/27979#issuecomment-704462646
Thanks for your answer and investigation @fangbinwei ! I edited the issue to reflect more precisely on what's happening for google users š
Also I can confirm that with your changes, my "mock" project and my real project are both working and passing their tests. š
Version
4.5.12
Reproduction link
https://github.com/lambertkevin/vue-cli-mocha-bug
Environment info
Steps to reproduce
1- Add an
includePaths
in thesassOptions
of avue.config.js
file.2- In your style,
@import
/@use
a file that should be accessible through theincludePaths
option in any file that will be tested with mocha (i.e. HelloWorld.vue in the vue boilerplate).3-
npm run test:unit
What is expected?
It should be able to
@import
/@use
any sass/scss file from theincludePaths
options.What is actually happening?
Tests won't pass because of importing issues.