Я использую style-loader, css-loader, sass-loader с Webpack для стилизации каждого реагирующего компонента, импортируя каждый файл .scss для каждого компонента.Все стили идут в bundle.js.Я хочу использовать переходы и анимацию для содержимого компонентов, но css-transitions-group, похоже, не работает.Это работает, только если я помещаю стили в файл css и связываю его с index.html.
Так, как я могу извлечь все эти связанные стили из загрузчиков в for ex.bundle.css.Я пытался использовать extract-text-webpack-plugin, но не смог правильно его настроить.
const webpack = require('webpack');
module.exports = {
module:{
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: { presets: ["es2015", "stage-2", "react"] }
}
},
{
test: /\.scss$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules:true,
localIdentName: "[local]_[hash]"
}
},
{
loader: "sass-loader"
}
]
},
{
test: /\.(jpg|png)$/,
use: ["file-loader"]
}
]
},
resolve:{
extensions: ["*", ".js", ".jsx"]
},
entry: "./src/index.js",
mode: "development",
output: {
path: __dirname + "/docs",
filename: "bundle.js"
},
devServer: {
contentBase: "./docs"
}
}