首页 文章

Webpack SASS加载器,别名不在Mocha下编译

提问于
浏览
0

我有一个加载这样的样式的组件 . 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 目录已被别名化 . 摩卡需要知道别名的位置 . 为了解决这个问题,我安装了 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 别名未得到解决 . However, this error only happens sometimes ,不可预测 . 为了始终如一地重新创建此错误,我必须在环境中设置 BABEL_DISABLE_CACHE=1 .

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

1 回答

  • 0

    为了解决这个问题,我从 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 所造成的损害;如果从未使用该包,则可能不需要每次运行 . )

相关问题