Karma webpack - 无法在 js 中处理 css 导入

Question

我正在编写一些学习项目来实现 TDD、webpack。

我使用具有以下配置的 webpack 2：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
//const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');

process.noDeprecation = true;

module.exports = {

  entry: './src/js/index.js', 
  devtool: 'source-map', 
  context: __dirname,
  target: 'web', 
  stats: 'errors-only',
  watch: true,


  output: {
    path: path.resolve(__dirname, './dist'), 
    filename: 'js/[name].[chunkHash].js', 
    publicPath: '/', 
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, 'src')
        ],
        exclude: [
          path.resolve(__dirname, 'node_modules')
        ],

        loader: 'babel-loader',

        options: {
          presets: ['es2015']
        },
      },
      {
        test: /\.css$/, 
        /*use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })*/
        use: [ 'style-loader', 'css-loader' ]

      }
    ]
  },

  plugins: [
    new WebpackMd5Hash(),
    //new ExtractTextPlugin('[name].[contenthash].css'),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      filename: 'index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      },
      inject: true
    }),
    new webpack.optimize.UglifyJsPlugin()
  ],

  devServer: {
    contentBase: path.join(__dirname, "dist/"),
    compress: true,
    port: 8080
}

}

当我运行简单地使用 webpack 时，它编译并且工作正常。但是当我尝试使用 webpack 预处理器运行 karma 时，它会出现以下错误： Uncaught Error: Module parse failed: C:\Users\Javid\Desktop\projects\rejection\src\css\style.css Unexpected token (1:0) You may need an appropriate loader to handle this file type.

我在我的 js 文件中使用 import '../css/style.css';。 google了很多，没找到解决办法。

解决方案

我使用额外的 raw-loader 来处理我的 css 并将我的导入更改为如下所示：import css from 'raw-loader!../css/style.css';

Answer 1

参考：https://angular.io/docs/ts/latest/guide/webpack.html

此站点展示了一个很好的开发、测试和生产构建项目示例。特别是对于您的问题，当运行 karma.

时，加载程序似乎被用来忽略 .css 文件

这是他们与业力相关的文件示例：

"karma.config.js":

module.exports = require('./config/karma.conf.js');

"karma.conf.js":

var webpackConfig = require('./webpack.test');

module.exports = function (config) {

        var _config = {
            basePath: '',

            frameworks: ['jasmine'],

            files: [
                {pattern: './config/karma-test-shim.js', watched: false}
            ],

            preprocessors: {
                './config/karma-test-shim.js': ['webpack', 'sourcemap']
            },

            webpack: webpackConfig,

            webpackMiddleware: {
                stats: 'errors-only'
            },

            webpackServer: {
                noInfo: true
            },

            reporters: ['kjhtml'],
            port: 9876,
            colors: true,
            logLevel: config.LOG_INFO,
            autoWatch: false,
            browsers: ['Chrome'],
            singleRun: true
        };

        config.set(_config);
    };

"webpack.test.js":

var webpack = require('webpack');
var helpers = require('./helpers');

module.exports = {
    devtool: 'inline-source-map',

    resolve: {
        extensions: ['.ts', '.js']
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: { configFileName: helpers.root('src', 'tsconfig.json') }
                    } , 'angular2-template-loader'
                ]
            },
            {
                test: /\.html$/,
                loader: 'html-loader'

            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'null-loader'
            },
            {
                test: /\.css$/,
                exclude: helpers.root('src', 'app'),
                loader: 'null-loader'
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                loader: 'raw-loader'
            }
        ]
    },

    plugins: [
        new webpack.ContextReplacementPlugin(
            // The (\|\/) piece accounts for path separators in *nix and Windows
            /angular(\|\/)core(\|\/)(esm(\|\/)src|src)(\|\/)linker/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        )
    ]
}

Karma webpack - 无法在 js 中处理 css 导入

Karma webpack - cannot handle css import in js

javascript

tdd

karma-runner

webpack