Webpack css-loader not building

Question

私のJSXファイルでcss-loaderを使用してCSSを読み込むことができません。私は、たとえば次のようだったから：

https://christianalfoni.github.io/react-webpack-cookbook/Loading-CSS.html

これはこれは

"devDependencies": { 
 
    "babel-core": "^6.3.26", 
 
    "babel-loader": "^6.2.0", 
 
    "babel-preset-es2015": "^6.3.13", 
 
    "babel-preset-react": "^6.3.13", 
 
    "css-loader": "^0.23.1", 
 
    "exports-loader": "~0.6.2", 
 
    "expose-loader": "~0.6.0", 
 
    "grunt": "^0.4.5", 
 
    "grunt-babel": "^6.0.0", 
 
    "grunt-cli": "^0.1.13", 
 
    "grunt-contrib-watch": "^0.6.1", 
 
    "grunt-webpack": "^1.0.11", 
 
    "history": "^1.17.0", 
 
    "imports-loader": "~0.6.3", 
 
    "jquery": "^2.1.4", 
 
    "lodash": "~3.0.0", 
 
    "react": "^0.14.5", 
 
    "react-dom": "^0.14.5", 
 
    "react-router": "^1.0.3", 
 
    "style-loader": "^0.13.0", 
 
    "webpack": "^1.12.9", 
 
    "webpack-dev-server": "^1.14.0" 
 
    }, 
 
    "dependencies": { 
 
    "chunk-manifest-webpack-plugin": "0.0.1", 
 
    "grunt-react": "^0.12.3" 
 
    }

私のpackage.jsonである私のJSX

import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import styles from './styles.css'; 
 
class Hello extends React.Component { 
 
    render() { 
 
    return <div>Hello world!</div> 
 
    } 
 
} 
 

 
var el = document.getElementById('content') 
 
var data = JSON.parse(el.getAttribute('data-attr')) 
 
ReactDOM.render(<Hello data={data} />, el);`

です

これは、これは私のStyles.cssを

#div { 
 
background-color: red; 
 
}

である私のWebpack.config.js

var path = require('path'); 
 
var webpack = require('webpack'); 
 

 
var config = module.exports = { 
 
    // the base path which will be used to resolve entry points 
 
    context: __dirname, 
 
    // the main entry point for our application's frontend JS 
 
    entry: './app/frontend/javascripts/entry.js', 
 
    stats: { 
 
     // Configure the console output 
 
     colors: true, 
 
     modules: true, 
 
     reasons: true 
 
    }, 
 
    progress: true, 
 
    keepalive: true, 
 
    module: { 
 
    loaders: [ 
 
     { 
 
     test: /\.js?$/, 
 
     exclude: /(node_modules|bower_components)/, 
 
     loader: 'babel-loader', // 'babel-loader' is also a legal name to reference 
 
     query: { presets: ['es2015', 'react'] } 
 
     }, 
 
     { test: /\.css$/, loader: "style-loader!css-loader" } 
 
    ] 
 
    }, 
 
    output: { 
 
    // this is our app/assets/javascripts directory, which is part of the Sprockets pipeline 
 
    path: path.join(__dirname, 'app', 'assets', 'javascripts'), 
 
    // the filename of the compiled bundle, e.g. app/assets/javascripts/bundle.js 
 
    filename: 'bundle.js', 
 
    // if the webpack code-splitting feature is enabled, this is the path it'll use to download bundles 
 
    publicPath: '/assets', 
 
    devtoolModuleFilenameTemplate: '[resourcePath]', 
 
    devtoolFallbackModuleFilenameTemplate: '[resourcePath]?[hash]', 
 
    }, 
 
    resolve: { 
 
    // tell webpack which extensions to auto search when it resolves modules. With this, 
 
    // you'll be able to do `require('./utils')` instead of `require('./utils.js')` 
 
    extensions: ['', '.js'], 
 
    // by default, webpack will search in `web_modules` and `node_modules`. Because we're using 
 
    // Bower, we want it to look in there too 
 
    modulesDirectories: [ 'node_modules', 'bower_components' ], 
 
    }, 
 

 
    plugins: [ 
 
    // we need this plugin to teach webpack how to find module entry points for bower files, 
 
    // as these may not have a package.json file 
 
    new webpack.ResolverPlugin([ 
 
     new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('.bower.json', ['main']) 
 
    ]), 
 
    new webpack.ProvidePlugin({ 
 
     $: 'jquery', 
 
     jQuery: 'jquery', 
 
    }), 
 
    //new webpack.optimize.CommonsChunkPlugin('common-bundle.js'), 
 
    //new webpack.optimize.CommonsChunkPlugin('public-bundle.js') 
 
    ] 
 
};

です210

「webpack」を実行するために私のgruntタスクを実行して得た出力： CSSのビルドに失敗した箇所が表示されます。

 cjs require fbjs/lib/mapObject [154] ./~/react/lib/ReactDOMFactories.js 18:16-45 
 
[157] ./~/react/lib/onlyChild.js 1.21 kB {0} [built] 
 
     cjs require ./onlyChild [153] ./~/react/lib/ReactIsomorphic.js 24:16-38 
 
[158] ./~/react/lib/deprecated.js 1.77 kB {0} [built] 
 
     cjs require ./deprecated [3] ./~/react/lib/React.js 19:17-40 
 
[159] ./~/react-dom/index.js 63 bytes {0} [built] 
 
     cjs require react-dom [0] ./app/frontend/javascripts/entry.js 11:16-36 
 

 
ERROR in ./app/frontend/javascripts/styles.css 
 
Module parse failed: /Users/Booboo/Projects/Xeon/app/frontend/javascripts/styles.css Line 1: Unexpected token { 
 
You may need an appropriate loader to handle this file type. 
 
| div { 
 
| background-color: red; 
 
| } 
 
@ ./app/frontend/javascripts/entry.js 5:0-23 
 
Warning: Task "webpack:dev" failed. Use --force to continue. 
 

 
Aborted due to warnings. 
 
Booboo$ grunt react && grunt webpack && grunt watch

Answer 1

あなたは

import styles from './styles.css'; 

を言うとき、あなたがモジュールとしてエクスポートされていないモジュールをインポートしようとしています。

は、単純なファイルのインポートにする代わりに

import './styles.css'; 

を試してみてください。

Answer 2

この問題も発生します。 は、しかし、私の場合、私は私のローダが正しく {test: /\.css$/, loader: 'style!css'}

ノート '' /.css$/周り

をのように記述する必要があります

{test: '/\.css$/', loader: 'style!css'}

として書かれていたました

私はこれがあなたに役立つと賢明です。