3
const path = require('path');
const ExtractTextPlugin = require ('extract-text-webpack-plugin');

module.exports = {
    context: __dirname,

    entry : {
        common: './source/js/common.js'
    },

    output: {
        path: path.resolve(__dirname, './public/js'),
        filename: '[name].js'
    },

    module: {
        rules: [
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        'css-loader',
                        'sass-loader'
                    ]
                })
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin('common.css')
    ]
}

Time: 133ms Asset Size Chunks Chunk Names common.js 2.53 kB 0 [emitted] common [0] ./source/js/common.js 53 bytes {0} [built]

Не генерируется сss файл. Как посмотреть что плагин вообще запускается. Может логер есть какой нибудь?

4
  • 2
    Вы require в коде делаете? Насколько понимаю, без него вебпак просто проигнорирует файл.
    – etki
    19 сен 2017 в 21:17
  • require чего именно?
    – ruslik
    19 сен 2017 в 21:22
  • японя мать, вы были правы, нужно сам scss файл инклудить в js. Не понятно только зачем
    – ruslik
    19 сен 2017 в 21:36
  • А он иначе не работает. Почему никто не подумал о том, что собирать нужно не только JS - я не знаю
    – etki
    19 сен 2017 в 21:55

2 ответа 2

2
+50

Устанавливаем модуль:

npm i -D extract-text-webpack-plugin

Подключаем:

const ExtractTextPlugin = require('extract-text-webpack-plugin');

Ну и код модуля вынесенный в отдельный файл:

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = function (paths) {
    return {
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    include: paths,
                    use: ExtractTextPlugin.extract({
                        publicPath: '../',
                        fallback: 'style-loader',
                        use: ['css-loader', 'sass-loader']
                    })
                },
                {
                    test: /\.css$/,
                    include: paths,
                    use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: 'css-loader'
                    })
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin('./css/[name].css')
        ]
    };
};

Соедините с основным конфигом с помощью пакета "webpack-merge". Если же не хотите выносить в отдельный файл то просто подключите в webpack.config.js и вставите:

module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: ExtractTextPlugin.extract({
                        publicPath: '../',
                        fallback: 'style-loader',
                        use: ['css-loader', 'sass-loader']
                    })
                },
                {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: 'css-loader'
                    })
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin('./css/[name].css')
        ]
    };

Ну и не забудьте пути к вашим файлам подкорректировать.

1

а вариант из документации Вам не подходит?

module.exports = {
    entry : './source/js/common.js',
    output: {
        path: __dirname + "./public/js",
        filename: '[name].js'
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
        }]
    },
}
2
  • Не работает тоже
    – ruslik
    19 сен 2017 в 21:22
  • нужно style-loader в фолбек перенести чтобы работало.
    – J. Doe
    29 мар 2018 в 8:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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