Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
den0820
5 / 0 / 2
Регистрация: 16.11.2013
Сообщений: 96
1

Почему ExtractTextPlugin не собирает css?

11.09.2017, 12:32. Просмотров 171. Ответов 1
Метки нет (Все метки)

Здравствуйте. Создал небольшой проект. В нем хотелось бы использовать less. Подключил ExtractTextPlugin, в конфиге вебпака вроде все настроил, но css не собирается. Помогите разобраться.

package.json:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
{
  "name": "react_course_01_07",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --progress --inline --hot",
    "dev": "SET NODE_ENV=development && npm run start",
    "prod": "SET NODE_ENV=production && webpack",
    "lint": "eslint ./src",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "devDependencies": {
    "autoprefixer-loader": "3.2.0",
    "babel-core": "^6.13.2",
    "babel-eslint": "^6.1.2",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-polyfill": "^6.13.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "css-loader": "^0.23.1",
    "eslint": "^3.3.0",
    "eslint-plugin-react": "^6.1.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "less": "2.7.1",
    "less-loader": "2.2.3",
    "react-hot-loader": "^1.3.0",
    "redux-thunk": "^2.2.0",
    "style-loader": "0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "classnames": "^2.2.5",
    "lodash": "^4.15.0",
    "prop-types": "^15.5.8",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-redux": "^5.0.4",
    "react-router": "2.6.1",
    "react-router-dom": "^4.1.1",
    "react-router-redux": "^4.0.8",
    "redux": "^3.6.0",
    "redux-devtools": "^3.3.2",
    "redux-devtools-dock-monitor": "^1.1.1",
    "redux-devtools-log-monitor": "^1.2.0"
  }
}
webpack.config:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
 
const NODE_ENV = process.env.NODE_ENV || 'development';
 
module.exports = {
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/dev-server',
        './src/app.js'
    ],
    output: {
        publicPath: 'http://localhost:3000/',
        //publicPath: '/',
        path: __dirname + '/public',
        filename: 'bundle.js'
    },
    watch: NODE_ENV == 'development',
    watchOptions: {
        aggregateTimeout: 100
    },
    devtool: NODE_ENV == 'development' ? 'cheap-inline-module-source-map' : null,
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        //new ExtractTextPlugin('bundle.css'),
        new ExtractTextPlugin('[name].css', {allChunks: true}),
        new webpack.DefinePlugin({
            NODE_ENV: JSON.stringify(NODE_ENV)
        }),
        new webpack.NoErrorsPlugin()
    ],
    resolve: {
        modulesDirectories: ['node_modules', 'bower_components'],
        moduleTemplates: ['*', 'index'],
        extensions: ['', '.js'],
        root: __dirname + '/src'
    },
    resolveLoader: {
        modulesDirectories: ['node_modules', 'bower_components'],
        moduleTemplates: ['*-loader', '*'],
        extensions: ['', '.js']
    },
    devServer: {
        host: 'localhost',
        port: 3000,
        contentBase: __dirname + '/public',
        inline: true,
        hot: true,
        historyApiFallback: true
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loaders: ['react-hot', 'babel-loader'],
                include: [
                    path.resolve(__dirname, 'src')
                ],
                plugins: ['transform-runtime']
            },
            //{
            //    test: /\.less$/,
            //    loader: 'style' +
            //    '!css?sourceMap' +
            //    '!autoprefixer-loader?browsers=last 2 version' +
            //    '!less?sourceMap=source-map-less-inline'
            //},
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract('css-loader!less-loader')
            },
            {
                test: /\.(png|jpg|svg|gif)$/,
                loader: 'file?name=img/[path][name].[ext]'
            },
            {
                test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]'
            },
            {
                test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10000&mimetype=application/octet-stream&name=fonts/[name].[ext]'
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file?name=fonts/[name].[ext]'
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url?limit=10000&mimetype=image/svg+xml&name=fonts/[name].[ext]'
            }
        ]
    }
};
 
 
if (NODE_ENV == 'production') {
    console.log('WTF');
    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings:       false,
                drop_console:   true,
                unsafe:         true
            }
        })
    );
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.09.2017, 12:32
Ответы с готовыми решениями:

Есть ли jquery плагин, который раскалдывает изображение на кубики и обратно собирает?
Есть ли jquery плагин, который раскалдывает изображение на кубики и обратно собирает?

Webpack собирает проект, а приложение говорит что мои конструкторы не конструкторы
Помогите пожалуйста, в едином файле (не билде) всё работает хорошо, как только начинаю отделять...

Какую информацию собирает этот скрипт?
Всем привет! В коде чужого сайта нашел такой скрипт function createCookies(){ $.get(...

Почему не работают CSS свойства в jQuery?
var elem = document.getElementById("video"); if (elem.requestFullscreen) { ...

Проверка css объекта. Почему не работает
if ($(this).attr("src") != '1.png') { ...Действие } Даже если у img ссылка равна 1.png всё равно...

1
whiteapps
408 / 373 / 220
Регистрация: 18.07.2014
Сообщений: 1,258
11.09.2017, 13:58 2
den0820, что пишется в консоли, когда запускаете webpack?
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
11.09.2017, 13:58

Почему css не работает!
У меня есть допустим на такой ссылки работает site.ru/fsdfsd а на такой нет site.ru/safsdf/fsdfsd...

CSS - Почему нет изображения?
Почему изображение не отображается/ CSS .Header_Fon { width: 900px; height: 150px;...

Почему не появляется css класс страницы?
Почему не появляется css класс страницы?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru