theWaR_13
@theWaR_13

Webpack отдельный .css файл для каждого .scss файла?

Добрый день. Очень много искал в гугле информацию по этому вопросу, однако, ничего путного так и не смог найти.
Если вкратце, делаю проект на React'е. В проекте используется SASS для стилей. И тут я подумал о том, что было бы неплохо реализовать CSS Modules.Попробовал, все работает, однако, от SASS отказываться не хочется. Погуглил по этой теме, не нашел что-то вроде SASS Modules. В виде решения предлагается использовать ExtractTextWebpackPlugin, однако, с ним тоже есть проблема. Он все .scss файлы сливает в один и делает из них style.css. Это неудобно, потому что я для каждого компонента хочу свой маленький модульный .css файл.
Вопрос собственно в том, что может кто нибудь знает, как сказать этому плагину, чтобы он делал не один большой style.css, а на каждый .scss файл создавал свой .css. Заранее спасибо.

На данный момент конфиг для вебпака выглядит вот так:

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

module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-hot-middleware/client',
        './src/index.jsx'
    ],
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new ExtractTextPlugin("[name].css")
    ],
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['react', 'es2015', 'react-hmre']
                }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", "css!autoprefixer-loader?browsers=last 15 versions!sass")
            },
            {
                test: /\.css$/,
                loader: "style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]"
            }
        ]
    }
}
  • Вопрос задан
  • 2774 просмотра
Пригласить эксперта
Ответы на вопрос 2
@stasov1
А как вы потом множество .css подключать будете? Все равно нужно на выходе слить все в 1 файл, но по вашему вопросу гуглите css-loader и postcss postcss-precss с реактом это очень классно. У вас кстати почти все настроенно.
Ответ написан
@germani
theWaR_13 Победил этот вопрос?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы