Question

所以我需要引入一些样式才能让旋转木马工作

// general styles
import 'style!css!react-responsive-carousel/lib/styles/main.css';

// carousel styles
import 'style!css!react-responsive-carousel/lib/styles/carousel.css';

问题是我得到以下错误并且是webpack的新手/反应我不知道，我只能假设它是一个webpack配置或我需要处理css的模块但是除了我以外不知所措。

./~/css-loader!./~/extract-text-webpack-plugin/loader.js?{"omit":5,"extract":true,"remove":true}!./~/style-loader!./~/css-loader!./~/postcss-loader!./~/less-loader!./~/css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/react-responsive-carousel/lib/styles/carousel.css
...
You may need an appropriate loader to handle this file type.

所以这是我的webpack配置

'use strict';

var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    index: './js/index.js'
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].bundle.js',
    chunkFilename: '[id].bundle.js',
  },
  debug: true,
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /(\.scss|\.css)$/,
        loader: ExtractTextPlugin.extract('style!css!postcss!less!', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!'),
      },
      {
        test: /\.less$/,
        loader: 'style!css!less'
      },
      {
        test: /\.(js|jsx)$/,
        loader: 'react-hot!babel',
        exclude: /(node_modules|bower_components)/,
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)\w*/,
        loader: 'file'
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  },
  postcss: function() {
    return [
      autoprefixer({browsers: ['last 5 versions']})
    ];
  },
  resolve: {
    root: [
      path.resolve(__dirname),
      path.resolve(__dirname, 'js', 'fw', 'lib')
    ]
  },
  plugins: [
    new ExtractTextPlugin('bundle.css', {allChunks: true}),
    new webpack.optimize.CommonsChunkPlugin('common.bundle.js'),
    new HtmlWebpackPlugin({
      title: 'fortafy-website',
      description: 'website for fortafy technologies',
      username: 'Samuel.Blackwell',
      filename: 'index.html',
      inject: 'body',
      template: 'index.html_vm',
      favicon: 'img/favicon.ico',
      hash: false
    })
  ]
};

这是我试图开始工作的组件：http://react-responsive-carousel.js.org/

尝试导入样式表时出现React / Webpack问题

0 个答案: