webpack css-loader не работает должным образом с кармой

Question

Я использую css-loaderLocal Scope, и с этим немного побеспокоился. Я пишу директиву для Vue.js. Эта директива импортирует файл scss и использует экспортированные классы, созданные загрузчиком, для назначения его некоторым элементам, которые создает директива. Это работает, когда я строю для prod/dev, но когда я строю для test, он не работает. Я импортирую свой файл директивы, и я тестирую одну из директивных функций, создавая элемент dom, используя jQuery, а затем назначаю ему класс, который выдает css-loader. Я использую karma для тестирования, поэтому, когда я запускаю сервер karma в своем браузере для отладки теста, я вижу, что элементам присваиваются классы, но у них нет никакого стиля. Я подозреваю, что моя конфигурация webpack для моей test среды виновата. Это мой 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' 
}; 

И тогда я использую его с кармой конфигурационный файл:

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:

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

Так классы присваиваются, но я не вижу style.css как указан в ExtractTextPlugin из webpack со своими стилями, и никаких стилей фактически не применяются к моему тесту созданы элементам DOM. Кто-нибудь понял, что я сделал неправильно?

Answer 1

Видимо not supported. Я использовал загрузчик стилей вместо своих тестов.