简体   繁体   English

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

[英]import of css using webpack returns an array not object

I have reviewed almost every question/answer on the site that relates to this but am unable to get things to work. 我已经回顾了网站上与此相关的几乎所有问题/答案,但我无法开始工作。

I am importing a .css file within my react code, as follows: 我在反应代码中导入.css文件,如下所示:

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

but when I console.log the theme object, I get an array, not an object. 但当我在console.log主题对象时,我得到一个数组,而不是一个对象。

File autosuggest.css contains: 文件autosuggest.css包含:

.suggestionsContainer ul {
  list-style: none;
}

My webpack config contains: 我的webpack配置包含:

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

The output of: 输出:

console.log(JSON.stringify(theme))

is the following: 如下:

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

I am completely lost here and any help will be greatly appreciated. 我完全迷失在这里,任何帮助将不胜感激。

For css you would normally load them into your index.html like; 对于CSS,您通常会将它们加载到index.html中;

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

Then setup the webpack cssloader to combine multiple css into one, or just move the one to your dist folder. 然后设置webpack cssloader将多个css合并为一个,或者只将一个css移动到dist文件夹中。 My webpack config looks like this; 我的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']} }; 

In this case I have the following in my index.html; 在这种情况下,我在index.html中有以下内容;

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM