I tried to find and run some projects with GitHub, but nothing works. Always always some mistakes. In issues just stupidly close your question.

Show a normal example where it works?

I reviewed all the tutorials, but nothing works from there either!

I'm so sick of it all. Some kind of creepy crutch and stupid technology this react!

webpack.config.js:

var ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { entry: './app/client.js', output: { filename: 'bundle.js', path: 'public/js' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['react', 'es2015', 'stage-1'] } }, { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') } ], }, plugins: [ new ExtractTextPlugin("styles.css"), ] };
  • Do you want to write css in jsx files? - qpeela
  • Yes it is! I want import css from './style.css' But it does not work! All settings for a hundred times changed, changed, but it does not work nifiga. I use webpack. - Daryn K.
  • Show webpack settings for css - qpeela
  • Threw in the post. This is one of the settings that does not work. I tried everything. The fact is that in all sorts of tutorials show how to do the usual example, or outdated versions. But as soon as you connect everything together: jsx, server-rendering, etc. Everything, everything collapses to hell! How to deal with this - no one says! - Daryn K.
  • one
    those. styles.css you styles.css file? I have almost the same config, only for less with one loader added. I do not know what can not work for you. Maybe you just do not connect the styles.css file to the page? And react is not a crutch technology) - Vasily Barbashev

2 answers 2

It works like this

 module.exports = { entry: './app/client.js', output: { filename: 'bundle.js', path: 'public/js' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['react', 'es2015', 'stage-1'] } }, { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: "css-loader", }), } ], }, plugins: [ new ExtractTextPlugin("styles.css"), ] };

Also versions:

 "extract-text-webpack-plugin": "^2.1.0", "css-loader": "^0.26.4", "style-loader": "^0.13.2", "webpack": "^2.2.1"

If there are errors then write.

The problem is in the server.js file https://github.com/webpack/webpack/issues/1754#issuecomment-186856033

  • The file itself through the webpack is collected. But I can not run the project, because babel can not handle css. And yet - I have server-side rendering. - Daryn K.
  • But does the webpack give you a css file? - qpeela
  • Yes, it does. But css it can not compile now. If you remove, then compiles normally. - Daryn K.
  • so for example you connect css to js: import './style.css' ;? - qpeela
  • like this: import css from './header.css' and like this: import './header.css' - does not accept. - Daryn K.

Show a normal example where it works?

The entire folder structure of the project is available here: https://bitbucket.org/stasok/react-complete/src/fd861f5bb714/boilerplate-3/?at=master

package.json

 { "name": "boilerplate", "version": "1.0.0", "description": "Simple react app", "main": "index.js", "scripts": { "test": "karma start", "start": "node server.js" }, "author": "Andrew Mead", "license": "MIT", "dependencies": { "axios": "^0.9.1", "express": "^4.13.4", "react": "^0.14.7", "react-addons-test-utils": "^0.14.7", "react-dom": "^0.14.7", "react-router": "^2.0.0" }, "devDependencies": { "babel-core": "^6.5.1", "babel-loader": "^6.2.2", "babel-preset-es2015": "^6.5.0", "babel-preset-react": "^6.5.0", "babel-preset-stage-0": "^6.5.0", "css-loader": "^0.23.1", "expect": "^1.14.0", "foundation-sites": "^6.2.0", "jquery": "^2.2.1", "karma": "^0.13.22", "karma-chrome-launcher": "^0.2.2", "karma-mocha": "^0.2.2", "karma-mocha-reporter": "^2.0.0", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "^1.7.0", "mocha": "^2.4.5", "node-sass": "^3.4.2", "sass-loader": "^3.1.2", "script-loader": "^0.6.1", "style-loader": "^0.13.0", "webpack": "^1.12.13" } }

webpack.config.js

 var webpack = require('webpack'); const path = require('path'); module.exports = { entry: [ 'script!jquery/dist/jquery.min.js', 'script!foundation-sites/dist/js/foundation.min.js', './app/app.jsx' ], externals: { jquery: 'jQuery' }, plugins: [ new webpack.ProvidePlugin({ '$': 'jquery', 'jQuery': 'jquery' }) ], output: { path: __dirname, filename: './public/bundle.js' }, resolve: { root: __dirname, alias: { applicationStyles: 'app/styles/app.scss' }, extensions: ['', '.js', '.jsx'] }, module: { loaders: [{ loader: 'babel-loader', query: { presets: ['react', 'es2015', 'stage-0'] }, test: /\.jsx?$/, exclude: /(node_modules|bower_components)/ }] }, sassLoader: { includePaths: [ path.resolve(__dirname, './node_modules/foundation-sites/scss') ] }, devtool: 'cheap-module-eval-source-map' };

server.js

 var express = require('express'); // Create our app var app = express(); const PORT = process.env.PORT || 3000; app.use(function(req, res, next) { if (req.headers['x-forwarded-proto'] === 'https') { res.redirect('http://' + req.hostname + req.url); } else { next(); } }); app.use(express.static('public')); app.listen(PORT, function() { console.log('Express server is up on port ' + PORT); });

  • I downloaded, looked. Horrible and heaped approach. I need to connect styles in components. and then, that everything was going to be in one style.css. The file is collected, but when you import the css-file, the code is not compiled, swears that it does not understand css. - Daryn K.
  • @DarynK did you use boilerplate-3? I have nothing like that. import css compiles everything - spectre_it