带有别名的 Webpack SASS 加载器未在 Mocha 下编译答案

【问题标题】：Webpack SASS loader with alias not compiling under Mocha带有别名的 Webpack SASS 加载器未在 Mocha 下编译
【发布时间】：2017-01-19 08:30:20
【问题描述】：

我有一个组件可以加载这样的样式。 css 目录在别的地方；这里它被用作 Webpack 别名。

import 'css/components/PromptText';
// ...
class PromptText extends React.Component {
    // ...
}

这是我的webpack.config.json：

var path = require('path');

module.exports = {
  entry: './src/index.jsx',
  output: {
    path: 'dist',
    filename: 'app.bundle.js',
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
    }, {
      test: /\.json/,
      exclude: /node_modules/,
      loader: 'json',
    }, {
      test: /\.scss/,
      exclude: /node_modules/,
      loaders: ['style', 'css', 'sass'],
    }],
  },
  resolve: {
    alias: {
      css: 'css', // <-- Alias here
    },
    root: path.resolve(__dirname),
    extensions: ['', '.js', '.jsx', '.scss'],
  },
};

现在，我对 Mocha 进行了这样的测试：

import PromptText from '../../src/components/PromptText';

describe('PromptText', () => {
  it('should display words');
});

当 Mocha 导入组件时，它也会尝试加载 CSS 组件。这样做有两个问题：

css 目录已被别名化。 Mocha 需要知道别名指向的位置。为了解决这个问题，我安装了babel-plugin-webpack-alias 包，下面是.babelrc：

{
  "presets": ["es2017", "react", "stage-0"],
  "env": {
    "test": {
      "plugins": [
        ["webpack-alias", {"config": "webpack.config.js"}]
      ]
    }
  }
}

Mocha 无法导入 CSS，因此需要忽略。我使用ignore-styles 包并将Mocha 调用为mocha --compilers js:babel-core/register --require ignore-styles。

尽管做了这两件事，我在尝试运行测试时收到以下错误：

(cd data && make)
make[1]: Nothing to be done for `all'.
NODE_ENV=test ./node_modules/.bin/mocha --compilers js:babel-core/register --require ignore-styles \
         $(find test -type f -name 'test*.js')
module.js:341
    throw err;
    ^

Error: Cannot find module 'css'
    at Function.Module._resolveFilename (module.js:339:15)
    at Function.Module._load (module.js:290:25)
    at Module.require (module.js:367:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/waleed/Workspace/js/steno/src/components/PromptText.jsx:2:1)
    at Module._compile (module.js:413:34)
    at loader (/Users/waleed/Workspace/js/steno/node_modules/babel-register/lib/node.js:146:5)
    at Object.require.extensions.(anonymous function) [as .jsx] (/Users/waleed/Workspace/js/steno/node_modules/babel-register/lib/node.js:156:7)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/waleed/Workspace/js/steno/test/components/testPromptText.js:2:1)
    at Module._compile (module.js:413:34)
    at loader (/Users/waleed/Workspace/js/steno/node_modules/babel-register/lib/node.js:146:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/waleed/Workspace/js/steno/node_modules/babel-register/lib/node.js:156:7)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Module.require (module.js:367:17)
    at require (internal/module.js:20:19)
    at /Users/waleed/Workspace/js/steno/node_modules/mocha/lib/mocha.js:220:27
    at Array.forEach (native)
    at Mocha.loadFiles (/Users/waleed/Workspace/js/steno/node_modules/mocha/lib/mocha.js:217:14)
    at Mocha.run (/Users/waleed/Workspace/js/steno/node_modules/mocha/lib/mocha.js:485:10)
    at Object.<anonymous> (/Users/waleed/Workspace/js/steno/node_modules/mocha/bin/_mocha:403:18)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:148:18)
    at node.js:405:3
make: *** [test] Error 1

由于某种原因，css 别名没有被解析。 但是，这个错误只会在某些时候发生，这是不可预知的。为了始终如一地重现此错误，我必须在环境中设置BABEL_DISABLE_CACHE=1。

如何让我的 Mocha 测试正确导入并忽略 CSS 文件？

【问题讨论】：

标签： sass webpack mocha.js

【解决方案1】：

为了解决这个问题，我从babel-plugin-webpack-alias 切换到babel-plugin-webpack-aliases 包，并更新我的.babelrc 以使用它：

{
  "presets": ["es2017", "react", "stage-0"],
  "env": {
    "test": {
      "plugins": [
        ["webpack-aliases", {"config": "webpack.config.js"}]
      ]
    }
  }
}

我也总是在环境中设置BABEL_DISABLE_CACHE=1 运行mocha。（我认为这正在消除 babel-plugin-webpack-alias 造成的损害；如果从未使用过该软件包，则每次运行都可能没有必要。）

【讨论】：