webpack css-loader funktioniert nicht wie erwartet mit karma

Question

Ich benutze css-loaderLocal Scope Funktion, und ein bisschen Ärger damit. Ich schreibe eine Direktive für Vue.js. Diese Direktive importiert eine scss Datei und verwendet die exportierten Klassen, die vom Loader erstellt wurden, um sie einigen Elementen zuzuweisen, die die Direktive erstellt. Das funktioniert, wenn ich für prod/dev baue, aber wenn ich für test baue, funktioniert es nicht. Ich importiere meine Anweisungsdatei und teste eine der Anweisungsfunktionen, indem ich ein dom-Element unter Verwendung von jQuery erstelle, und weise ihm dann die exportierte Klasse css-loader zu. Ich verwende karma zum Testen, also wenn ich den karma Server in meinem Browser starte, um den Test zu debuggen, sehe ich, dass die Elemente den Klassen zugewiesen sind, aber sie haben keinerlei Styling. Ich vermute, dass meine webpack Konfiguration für meine test Umgebung ist schuld. Das ist mein webpack Config für meine test Umgebung:

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

Und ich benutze es dann mit Karma-Konfigurationsdatei:

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

Hier ist meine Richtlinie, die SCSS-Datei importieren:

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

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

Und dann verwende ich es in meinem Test, um die Klassen für test created dom Elemente zuzuweisen:

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

So werden die Klassen zugeordnet, aber ich sehe nicht, jede style.css wie in der mit meinem Arten ExtractTextPlugin von webpack angegeben, und es werden keine Stile sind eigentlich zu meinem Test erstellt dom Elemente angewendet. Jeder hat eine Idee, was habe ich falsch gemacht?

Answer 1

Anscheinend not supported. Ich habe stattdessen Style Loader für meine Tests verwendet.