karmaでwebpack css-loaderが期待どおりに動作しない

Question

私はcss-loaderLocal Scopeという機能を使用していますが、少し問題があります。 私はVue.jsの指令を書いています。 このディレクティブはscssファイルをインポートし、ローダによって作成されたエクスポートされたクラスを使用して、ディレクティブが作成しているいくつかの要素にそれを割り当てます。 これはprod/devのビルド時に動作しますが、testをビルドすると動作しません。 ディレクティブファイルをインポートし、jQueryを使用してdom要素を作成し、css-loaderをエクスポートしてディレクティブ関数の1つをテストします。私はkarmaをテスト用に使用しています。したがって、ブラウザでkarmaサーバを起動してテストをデバッグすると、要素にクラスが割り当てられていることがわかりますが、スタイリングはまったくありません。私はtest環境のために私のwebpackの設定が間違っていると疑っています。 これは私のtest環境のための私のwebpack configです：

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' 
}; 

そして私はカルマの設定ファイルとそれを使用します。

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

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

：

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ファイルをインポートし、私の指示です

そして私は、私のテストで、dom要素を作成したテスト用のクラスを割り当てます：

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

だから、クラスが割り当てられているが、私は私のスタイルでwebpackのExtractTextPluginに指定され、何のスタイルが実際に私のテストに適用されていないような任意のstyle.cssは、DOM要素を作成して表示されません。私は間違って何をしたのですか？

Answer 1

明らかにnot supported。 テストの代わりにスタイルローダーを使用しました。