Как предварительно скомпилировать scss в один файл css в webpack?

использование React with webpack. Пробежал некоторые статьи, но большинство из них предлагают вызвать отдельный файл scss для каждого компонента. Но я хотел бы предварительно скомпилировать все css в один файл для всего приложения, как мы делаем с помощью grunt/gulp.

enter image description here

6
css reactjs sass webpack webpack-style-loader

2 ответов

можно использовать webpack-text-extract-pluggin который отвечает за компиляцию всех файлов css и связывание их в .

Также обратите внимание, что вам потребуется для установки Сасс-погрузчик too для компиляции scss.

в конфигурации webpack:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
config = {
    ..., 
    plugins: [
        ...,
        new ExtractTextPlugin('index.css')
    ],
    module: {
        loaders: [
            ...
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style','css')
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style', 'css!sass')
            }
        ]
    }
}

в индекс.HTML-код: 

<link rel="stylesheet" type="text/css" href="/index.css">

в любом файле Javascript, который проходит через webpack:

require("./styles/my-custom-file.scss");
5

Вы может взглянем на!--3-->extract-text-webpack-плагин.

после требования этого в вашем webpack.конфиг.js:

var ExtractTextPlugin = require("extract-text-webpack-plugin");

вы можете переписать свой загрузчик sass на это:

module: {
    loaders: [
        {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
        {test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css', 'sass')}
    ]
},
plugins: [
    new ExtractTextPlugin('bundle.css')
]

для получения дополнительных опций и использования проверьте ссылку выше.

3