Question

我在项目中使用的是Jest，并且卡在了一个包含SCSS变量的测试中。

$grey-light: #C7C7C7;

我得到这个开玩笑的错误：

Jest encountered an unexpected token

，它指向前面提到的代码行。

您能帮我吗？

谢谢

Answer 1

Sass可帮助您编写更具组织性和可维护性的代码，但这不是有效的CSS代码，因此，浏览器不知道如何阅读。

scss文件需要编译成css，并且需要导入和使用css文件。例如，您定义的参数具有#C7C7C7值。编译器将用该值替换该参数，以便最终的CSS仅包含硬编码的值

Answer 2

我也遇到了这个问题，并使用identity-obj-proxy软件包解决了这个问题：

https://github.com/keyz/identity-obj-proxy

只需遵循Jest文档中的说明：

https://jestjs.io/docs/en/webpack#mocking-css-modules

并且应该运行有关.scss文件导入语句的问题。您所要做的就是在package.json文件中添加jest配置：

{
  "name": "...",
  "version": "0.0.0",
  "description": "...",
  "main": "index.js",
  "scripts": {
    "start": "webpack --config webpack.config.js",
    "test": "jest"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(css|scss|less)$": "identity-obj-proxy"
    }
  },
  "keywords": [],
  "author": "Homer Jay",
  "license": "MIT",
  "devDependencies": {},
  "dependencies": {}
}

.scss导入将按预期工作，并且任何变量或mixin都不会引发错误。

笑话和SCSS变量

2 个答案: