1

我正在使用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'
};

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

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'));
...

所以分配了类，但我没有看到在我的样式的ExtractTextPlugin中style.css指定的任何类似内容，并且实际上没有样式应用于我的测试创建的 dom 元素。有人知道我做错了什么吗？webpack

4

1 回答 1

1

显然不支持。我使用样式加载器代替我的测试。

于 2016-10-24T19:59:03.033 回答