2

Пробовал найти и запустить какие-то проекты с GitHub, но ничего не работает. Постоянно всегда какие-то ошибки. В issues просто тупо закрывают твой вопрос.

Покажите нормальный пример, где это работает?

Пересмотрел все туториалы, но не работает оттуда тоже ничего!

Как же всё надоело. Какая-то жуткая костыльная и дурацкая технология этот 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"),
    ]
};
7
  • Вы хотите писать css в jsx файлах?
    – qpeela
    9 мар 2017 в 4:58
  • Да, именно! Я хочу import css from './style.css' Но не работает! Все настройки по сто раз менял-переменял, но не получается нифига. Использую webpack.
    – Daryn K.
    9 мар 2017 в 5:22
  • Покажите настройки webpack для css
    – qpeela
    9 мар 2017 в 5:24
  • Закинул в пост. Эта одна из настроек, которая не работает. Я всё перепробовал. Дело в том, что во всяких туториалах показывают, как делать на обычном примере, или устаревших версиях. Но как только ты подключаешь всё вместе: jsx, server-rendering и т.д. Всё, всё рушится к чертям! Как с этим быть - никто не говорит!
    – Daryn K.
    9 мар 2017 в 5:42
  • 1
    т.е. файл styles.css у вас не появляется? У меня почти такой-же конфиг, только для less с добавленным одним лоадером. Не знаю что у вас может не работать. Может вы просто не подключаете к странице файл styles.css? И react это не костыльная технология) 9 мар 2017 в 6:15

2 ответа 2

1

Работает вот так

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"),
    ]
};

Также версий:

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

Если будут ошибки то напишите.


Проблема в файле server.js https://github.com/webpack/webpack/issues/1754#issuecomment-186856033

9
  • Сам файл через webpack собирается. Но я не могу запустить проект, так как babel не может обработать css. И ещё - у меня server-side rendering.
    – Daryn K.
    9 мар 2017 в 6:32
  • Но на выходе вам webpack дает css файл?
    – qpeela
    9 мар 2017 в 6:35
  • Да, даёт. Но css он не может скомпилировать теперь. Если убрать, то нормально компилирует.
    – Daryn K.
    9 мар 2017 в 6:39
  • вы так например подключаете css в js: import './style.css';?
    – qpeela
    9 мар 2017 в 6:41
  • так: import css from './header.css' и так: import './header.css' - не принимает.
    – Daryn K.
    9 мар 2017 в 6:43
0

Покажите нормальный пример, где это работает?

Вся структура папок проекта, доступна здесь : 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);
});

2
  • Скачал, посмотрел. Ужасный и нагроможденный подход. Мне надо подключать стили в компонентах. и потом, чтобы всё собиралось в один style.css. Файл собирается, но когда делаешь import css-файла, код не компилируется, ругается, что не понимает css.
    – Daryn K.
    9 мар 2017 в 10:05
  • @DarynK вы boilerplate-3 - использовали ? у меня ничего такого нет. импортирую css все компилируется
    – spectre_it
    9 мар 2017 в 10:10

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.