使用webpack導入css會返回一個數組而不是對象

Question

我已經審查了網站上與此相關的幾乎所有問題/答案，但無法讓事情發揮作用。

我輸入我的內.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">