Webpack css-loader non sta compilando

Question

Ho difficoltà ad ottenere il caricamento CSS usando css-loader sui miei file JSX. Stavo seguendo l'esempio da:

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

Questo è il mio 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);`

Questo è il mio package.json

"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" 
 
    }

Questo è il mio 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') 
 
    ] 
 
};

Questo è il mio styles.css

#div { 
 
background-color: red; 
 
}

L'output ottenuto dall'esecuzione del mio task grunt per eseguire il "webpack" allegato: Puoi vedere dove dice che la compilazione non è riuscita per il 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

Quando si dice

import styles from './styles.css'; 

si sta cercando di importare un modulo che non è esportato come modulo.

Prova

import './styles.css'; 

invece di farne una semplice importazione di file.

Answer 2

Ho riscontrato anche questo problema. Ma nel mio caso, ho trovato il mio caricatore è stato scritto come

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

che dovrebbe essere scritta correttamente come {test: /\.css$/, loader: 'style!css'}

nota la '' intorno al /.css$/

Per quanto mi riguarda, sarebbe utile per te.