Estoy tratando de configurar una aplicación ReactJS, usando Express como servidor back-end. Estoy enfrentando un problema con los archivos .css, cuando ejecuto 'npm start' recibo este error.
/client/app.css Unexpected token (1:0) You may need an appropriate loader to handle this file type. | .layoutHeader { | background: #00AAFA;}Esta es la configuración de mi aplicación.
paquete.json
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "NODE_ENV=development node_modules/.bin/babel-node --presets 'react,es2015' server/server.js" }, "dependencies": { "body-parser": "^1.17.1", "ejs": "^2.5.6", "express": "^4.15.2", "moment": "^2.18.1", "mongoose": "^4.9.6", "react": "^15.5.4", "react-bootstrap": "^0.30.10", "react-dom": "^15.5.4", "react-router": "^2.4.0", "react-router-redux": "^4.0.8", "redux": "^3.6.0", "request": "^2.81.0" }, "devDependencies": { "babel-cli": "^6.24.1", "babel-core": "^6.24.1", "babel-loader": "^7.0.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.0", "nodemon": "^1.11.0", "react-hot-loader": "^1.3.1", "style-loader": "^0.16.1", "webpack": "^2.4.1", "webpack-dev-middleware": "^1.10.2", "webpack-hot-middleware": "^2.18.0" }webpack.config.js
module.exports = { devtool: "", entry: [ 'webpack-hot-middleware/client', path.join(path.resolve(__dirname), 'client', 'client.js') ], output: { path: path.join(path.resolve(__dirname), 'public', 'js'), filename: 'bundle.js', publicPath: '/js/' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { cacheDirectory: 'babel_cache', presets: debug ? ['es2015', 'react'] : ['react', 'es2015'] } } { test: /\.css$/, exclude: /node_modules/, loader: 'style-loader!css-loader', }, { test: /\.css$/, include: /node_modules/, loaders: ['style-loader', 'css-loader'], } ] }, }Y no configuré nada en el archivo .babelrc.
Quería escribir CSS individual para cada componente y que solo se pueda importar a ese componente.
Creo que me perdí alguna configuración con babel, por favor ayúdame a configurar esta aplicación.
Gracias por adelantado.
La configuración del paquete web parece correcta. Probablemente haya un problema con la importación de CSS, tiene que ser así:
import './style.css'; where './' is path.Si desea escribir CSS para cada componente, le sugiero que eche un vistazo a los módulos CSS https://github.com/css-modules/css-modules
Si está utilizando webpack-dev-middleware, debe asegurarse de configurarlo con la configuración de su paquete web:
const webpack = require('webpack'); const webpackDevMiddleware = require('webpack-dev-middleware'); const webpackConfig = require('path/to/webpack.config.js'); const compiler = webpack(webpackConfig); module.exports = webpackDevMiddleware(compiler, { /* options */ }