Question

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

在我的SUT

中

我有一些导入scss的代码：

0,30 0,5-23 * * * /path_to_script

此代码在运行测试时导致错误：

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)

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

运行测试

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

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

我找到的所有答案都是直接用于摩卡，但我没有运行测试：

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

我如何在编译器或设置文件中工作，告诉mocha忽略.scss文件。我肯定会在.svg文件旁边遇到这个问题我确定。

Answer 1

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 / ignore-styles，假设你的项目根目录中有node_modules。

Answer 2

所以我遇到类似的问题，尝试使用webpack-loader前缀并且因为没有在webpack的上下文中而失败。

prunk比重新布线等更好，因为能够进行路径匹配和替换，所有文件都覆盖了我。

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

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

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

（正是style-loader所做的，但是样式加载器会自行清理！还要注意样式加载器是错误名称并且可以处理许多扩展））

我在测试运行器的顶部添加了这个，没有任何未完成的模块！

注意我实际上更进一步，通过使用fs读取文件并将其传递给加载器本身使用原始加载器但可能已经过度杀死，应该首先使用webpack来使用那个唯一的装载器进行测试！

使用babel-node和babel-istanbul运行mocha测试时加载css时出错

在我的SUT

廉价的解决方法

运行测试

2 个答案: