【问题标题】：error loading css when running mocha tests with babel-node and babel-istanbul使用 babel-node 和 babel-istanbul 运行 mocha 测试时加载 css 时出错
【发布时间】：2016-04-02 18:38:48
【问题描述】：

我在测试使用 webpack 导入 .scss 的 UI 组件时遇到问题。我是直接测试组件代码，而不是导出的 webpack 包。

在我的 SUT 中

我有一些导入 scss 的代码：

import '!style!css!sass!postcss-loader!../style.scss'

当我运行测试时，这段代码会导致错误：

Error: Cannot find module '!style!css!sass!postcss-loader!../../stylesheets/parts/Breadcrumbs.scss'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:286:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)

廉价的解决方法

我一直在解决这个问题：

try {
    require('!style!css!sass!postcss-loader!../style.scss');
} catch(err) { console.log('Not webpack'); }

但这闻起来很脏，我宁愿在我的 SUT 中没有这段代码。

运行测试

当直接使用 babel-node 和 babel-istanbul 而不是 mocha 时，我无法弄清楚如何在我找到的解决方案中工作。以下是我当前运行测试的方式：

$ babel-node babel-istanbul cover _mocha -- --require ./test/setup.js --recursive

我找到的所有答案都是直接针对 mocha 的，但我没有运行测试：

$ mocha --compilers js:babel-core/register --require ./test/setup.js --recursive

?

我如何在编译器或设置文件中工作以告诉 mocha 忽略 .scss 文件。我敢肯定，接下来我也会遇到 .svg 文件的这个问题。

【问题讨论】：

我也有同样的问题，我一直在找babel css loader，如果有的话。

标签： sass mocha.js webpack babeljs

【解决方案1】：

所以我在尝试使用 webpack-loader 前缀时遇到了类似的问题，但由于不在 webpack 的上下文中而失败。

prunk 比 rewire 等更好，因为它涵盖了所有文件，因为它能够进行路径匹配和替换。

var prunk = require('prunk'); prunk.alias(/^(your loader prefix)/, '');

然后我修改了需要扩展处理来替换正在导入的内容。

require.extensions['.scss'] = function (module, filename) { module.exports = 'whatever you want'; };

（正如style-loader 所做的那样，但 style-loader 会自行清理！还要注意 style loader 命名错误并且可以处理许多扩展）

我在我的测试运行器顶部添加了这个并且没有未找到的模块！

注意我实际上更进一步并通过使用 fs 读取文件并将其传递给加载器来单独使用原始加载器，但这可能已经过度杀戮和应该首先使用 webpack 使用唯一的加载器来转换测试！

【讨论】：

【解决方案2】：

github.com/css-modules/css-modules-require-hook 怎么样，或者如果你想忽略 css npmjs.com/package/ignore-styles

编辑：如果你安装ignore-style模块然后运行：

babel-node babel-istanbul cover _mocha -- --require ./test/setup.js --require node_modules/ignore-styles --recursive

我确定它会起作用，但请记住，假设您的项目根目录中有 node_modules，您可能需要更改路径 node_modules/ignore-styles。

【讨论】：