使用 webpack 导入 css 返回一个数组而不是对象

Question

我已经查看了网站上几乎所有与此相关的问题/答案，但无法让事情正常进行。

我在我的 react 代码中导入一个 .css 文件，如下：

import theme from '../stylesheets/autosuggest.css';

但是当我 console.log 主题对象时，我得到一个数组，而不是一个对象。

文件 autosuggest.css 包含：

.suggestionsContainer ul {
  list-style: none;
}

我的 webpack 配置包含：

  {
    test: /\.css$/,
    loader: "css-loader?modules=true"
  },
  {
    test: /\.scss$/,
    loader: "style-loader!raw-loader!sass-loader)
  },

输出：

console.log(JSON.stringify(theme))

如下：

[[629,"._1iN32ylkX4V29XkoF-ztbe ul {\n  list-style: none;\n}",""]]

我完全迷失在这里，任何帮助将不胜感激。

Answer 1

对于 css，您通常会将它们加载到 index.html 中，例如；

<link rel="stylesheet" href="stylesheets/autosuggest.css">

然后设置 webpack cssloader 将多个 css 合并为一个，或者只是将一个移动到您的 dist 文件夹。我的 webpack 配置如下所示；

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');

const minimize = process.argv.indexOf('--no-minimize') === -1 ? true : false;
let plugins = [];

plugins.push(new ExtractTextPlugin('app.css', {allChunks: true}));
plugins.push(new webpack.optimize.CommonsChunkPlugin('lib', 'lib.js', Infinity));
if (minimize) plugins.push(new webpack.optimize.UglifyJsPlugin({include: /lib\.js/, minimize: true}));

const ROOT_PATH = path.resolve(__dirname);
const SRC_PATH = path.resolve(ROOT_PATH, 'ui-src', 'app.jsx');
const DIST_PATH = path.resolve(ROOT_PATH, 'ui-dist');

module.exports = {

  entry: {
    app: SRC_PATH,
    lib: ['react', 'react-dom', 'react-hammerjs', 'react-mixin', 'redux', 'screenfull', 'whatwg-fetch', 'react-redux', 'react-modal']
  },

  output: {
    path: DIST_PATH,
    filename: 'app.js'
  },

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {presets:['es2015', 'react', 'stage-0']}
      },
      {test: /\.css$/, loader: ExtractTextPlugin.extract('css-loader')},
      {test: /\.(png|jpg|ico|gif)$/, loader: 'file-loader?name=img/[name].[ext]'},
      {test: /\.(html|pdf)$/, loader: 'file-loader?name=[name].[ext]'}
    ]
  },
  plugins,
  resolve: {extensions: ['', '.js', '.jsx']}
};

在这种情况下，我的 index.html 中有以下内容；

<link rel="stylesheet" href="app.css">