Блог

Я использую функцию css-loader Local 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'
};
  

И затем я использую его с файлом конфигурации 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:

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

Итак, классы назначены, но я не вижу ничего style.css подобного, указанного в ExtractTextPlugin из webpack с моими стилями, и никакие стили на самом деле не применяются к моим тестовым элементам dom, созданным. У кого-нибудь есть идея, что я сделал не так?

По-видимому, не поддерживается. Вместо этого я использовал style loader для своих тестов.