Загрузчик Sass и webpack 4

Как использовать загрузчик sass с webpack 4? Я много читал об этом и о большинстве сайтов, рекомендующих использовать ExtractTextPlugin, но ExtractTextPlugin не работает с webpack 4.

Я написал следующий webpack.config.js:

const path = require('path');
const ClosureCompilerPlugin = require('webpack-closure-compiler');


module.exports = {
    module: {
        rules: [
            {
             test: /\.scss$/,
             use: [{
                 loader: "style-loader"
             }, {
                 loader: "css-loader"
             }, {
                 loader: "sass-loader"
             }]
            }
        ]
    },
    plugins: [
        new ClosureCompilerPlugin({
            compiler: {
                language_in: 'ECMASCRIPT6',
                language_out: 'ECMASCRIPT3',
                compilation_level: 'ADVANCED'
            },
            concurrency: 3,
        })
    ]
};

Выходной файл .js работает хорошо, но мой .scss не компилировался в css. Пробую добавить точки входа:

entry: {
    stylesheet: path.resolve('src', 'scss/styles.scss'),
    main: path.resolve('src', 'index.js')
}

и после этого мой styles.scss компилируется в stylesheet.js, но не в .css.


person Jonhy Beebop    schedule 03.04.2018    source источник


Ответы (3)


webpack 4 пока не может самостоятельно выводить *.css файл. Чтобы получить отдельный *.css файл, вам нужно использовать extract-text-webpack-plugin для извлечения вывести весь CSS в отдельный входной блок. Это хорошее руководство.

person Huy Nguyen    schedule 03.04.2018
comment
Это здорово, но я все еще не могу получить выходной файл main.css. Я пытаюсь добавить stylesheet: path.resolve('src', 'scss/styles.scss'), в свой entry в файле конфигурации, и я получаю main.js, main.css и stylesheet.js (почему?). Я пытаюсь потребовать свои стили внутри index.js, но это всегда ошибка (не удается найти модуль). - person Jonhy Beebop; 04.04.2018
comment
@MaximZemskov попробуйте удалить запись css из конфигурации веб-пакета, чтобы узнать, поможет ли это. - person Huy Nguyen; 04.04.2018
comment
Плагин extract-text-webpack-plugin плохо работает с webpack 4. Вместо этого вы должны использовать этот плагин: mini-css-extract-plugin - person danielrvt; 25.12.2018

Вы можете использовать mini-css-extract-plugin.

https://github.com/webpack-contrib/mini-css-extract-plugin

Я использовал тот же плагин для извлечения SASS в CSS с помощью webpack 4, и он отлично работает.

person Hamed    schedule 05.04.2018
comment
Я тестировал бета-версию плагина extract-text-webpack-plugin для webpack 4, и он тоже работает нормально. github.com/webpack- contrib / extract-text-webpack-plugin / Release / - person Hamed; 06.04.2018
comment
Да, но это бета. Более того, создатели extract-text-webpack-plugin предлагают пользователям использовать mini-css-extract-plugin - person thexpand; 20.07.2018

Бета-версия хорошо работает с [email protected]

npm install extract-text-webpack-plugin@next

person Tomek    schedule 29.06.2018