Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SCSS @import to Webpack alias fails in 2.2.0

See original GitHub issue

There seems to be a critical bug in 2.2.0 with the introduction of SCSS support. When trying to import a file with:

@import '~@design';

I see the repeated error:

File to import not found or unreadable: src/components/~@design.
Parent style sheet: stdin

  at Object.module.exports.renderSync (node_modules/node-sass/lib/index.js:439:16)
  at module.exports (node_modules/vue-jest/lib/compilers/scss-compiler.js:28:15)
  at processStyleByLang (node_modules/vue-jest/lib/process-style.js:6:82)
  at processStyle (node_modules/vue-jest/lib/process-style.js:15:17)
  at parts.styles.map.ast (node_modules/vue-jest/lib/process.js:98:11)
    at Array.map (<anonymous>)
  at Object.module.exports [as process] (node_modules/vue-jest/lib/process.js:93:35)

This causes every test to fail, even ones that don’t have anything to do with Vue or SCSS - and even when those tests are run in isolation, oddly. Unfortunately, matching neither @design nor ~@design in moduleNameMapper has seemed to have any effect.

As a side note, seeing as there still seem to be quite a few other issues with CSS support in general, I wonder if trying to compile styles should be an opt-in experimental feature for now.

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:11 (7 by maintainers)

Top GitHub Comments

4reactions

eddyerburghcommented, Mar 22, 2018

To turn off CSS compilation in v2.3.0:

"globals": {
  "vue-jest": {
    "experimentalCSSCompile": false
  }
}

2reactions

jeremyzahnercommented, Apr 11, 2018

@chrisvfritz After merging https://github.com/vuejs/vue-jest/pull/82 matching via moduleNameMapper will work for SCSS. Maybe we can even make that work in stylus since the module responsible for resolving the aliases is already separated into a helper.

Top Results From Across the Web

scss file @import does not recognize resolve alias

I was able to use, on a stylesheet, an alias that I defined in webpack by using the following: @import '~alias/variables';.

To v2 or v3 from v1 - webpack

In webpack 1, configured loaders resolve relative to the matched file. However, in webpack 2, configured loaders resolve relative to the context option....

Unable to resolve path to module 'webpack-hot-middleware'

If the build is failing, then the everything else isn't going to work (including styles). Try rerunning yarn to ensure all the Node...

sass-loader | Yarn - Package Manager

The sass-loader uses Sass's custom importer feature to pass all queries to the Webpack resolving engine. Thus you can import your Sass modules...

sass-resources-loader - npm

If you still want to use Sass import rules make sure your paths are relative to the file they defined in (basically, your...