Добрый день. Очень много искал в гугле информацию по этому вопросу, однако, ничего путного так и не смог найти.
Если вкратце, делаю проект на 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]"
}
]
}
}
Средний
Простой
