webpack css-loader 无法按预期使用 karma

Question

我正在使用 css-loader Local Scope 功能，但遇到了一些问题。我正在为 Vue.js 编写指令。该指令正在导入一个 scss 文件，并使用加载程序创建的导出的 classes 将其分配给指令正在创建的某些元素。这在我为 prod/dev 构建时有效，但是当我为 test 构建时它不起作用。我导入我的指令文件，并通过使用 jQuery 创建一个 dom 元素来测试其中一个指令函数，然后将其分配给导出的 class 和 css-loader。我使用 karma 进行测试，所以当我在浏览器中启动 karma 服务器来调试测试时，我看到元素被分配了 classes，但它们没有任何样式。我怀疑我的 test 环境的 webpack 配置有问题。这是我的 webpack 我的 test 环境配置：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint'
      }
    ],
    loaders: [
      {
        test: /.json$/,
        loader: 'json'
      },
      {
        test: /\.(css|scss)$/,
        loaders: ExtractTextPlugin.extract({
          fallbackLoader: 'style',
          loader: 'css!sass!postcss'
        })
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /.vue$/,
        loader: 'vue'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ],
  vue: {
    loaders: {
      sass: ExtractTextPlugin.extract("css!sass")
    }
  },
  debug: true,
  devtool: 'source-map'
};

然后我将它与 karma 配置文件一起使用：

const conf = require('./gulp.conf');

module.exports = function (config) {
  const configuration = {
    basePath: '../',
    singleRun: false,
    autoWatch: true,
    logLevel: 'INFO',
    junitReporter: {
      outputDir: 'test-reports'
    },
    browsers: [
      'PhantomJS'
    ],
    frameworks: [
      'jasmine'
    ],
    files: [
      'node_modules/es6-shim/es6-shim.js',
      conf.path.src('app.spec.js')
    ],
    preprocessors: {
      [conf.path.src('app.spec.js')]: [
        'webpack'
      ]
    },
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    },
    webpack: require('./webpack-test.conf'),
    webpackMiddleware: {
      noInfo: true
    },
    plugins: [
      require('karma-jasmine'),
      require('karma-junit-reporter'),
      require('karma-coverage'),
      require('karma-phantomjs-launcher'),
      require('karma-phantomjs-shim'),
      require('karma-webpack')
    ]
  };

  config.set(configuration);
};

这是我的指令，导入 scss 文件：

import classes from '../../css/directives/tooltip.scss';

const TOOLTIP_CLASS = classes.tooltip;
const TOOLTIP_ARROW_CLASS = classes.arrow;

然后我在测试中使用它为测试创建的 dom 元素分配 classes:

...
const $arrow = $(document.createElement('span'));
$arrow.addClass(TooltipRewireAPI.__get__('TOOLTIP_ARROW_CLASS'));
...

因此 classes 已分配，但我没有看到 webpack 的 ExtractTextPlugin 中指定的任何 style.css 和我的样式，也没有任何样式实际上应用于我测试创建的 dom 元素。有人知道我做错了什么吗？

Answer 1

显然 not supported。我使用样式加载器代替我的测试。

webpack css-loader 无法按预期使用 karma

webpack css-loader doesn't work as expected with karma

javascript

build

karma-runner

webpack

css-loader