React animated slider + webpack + scss and css - css

Question

I built react app from scratch. I'm trying to add react animated slider for my site from npm package. Unfortunatelly only images are shown - but one below another, I mean not in one row - and also navigations arrow are above images, even if styles are attached. When I use this npm package with create-react-app it works fine, as expected, but in my own boilerplate it brokes. I'm asking for help. Here's my code:
webpack.config.js:
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: ["babel-polyfill", "./src/index.js"],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
},
]
},
{
test: /\.(woff|svg|png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './assets'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({ filename: "style.css" }),
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
slider.js component:
import React, { Component } from 'react';
import Slider from 'react-animated-slider';
import 'react-animated-slider/build/horizontal.css';
import one from '../assets/slider/one.jpg';
import two from '../assets/slider/two.jpg';
import three from '../assets/slider/three.jpg';
class Carousel extends Component {
render() {
const content = [one, two, three];
return (
<Slider>
{content.map((article, index) => <div key={index}>
<img src={article} alt='wtz' />
</div>)}
</Slider>
);
}
}
export default Carousel;
app.js component:
import React from 'react';
import classes from './App.scss';
import Header from '../header/Header';
import Nav from '../nav/Navigation';
import Carousel from '../carousel/Carousel';
const app = () => {
return (
<div className={classes.container}>
<Header />
<Nav />
<Carousel />
</div>
);
};
export default app;
I think that somthing must be wrong with bundling, I don't know. Also my console tells that everything is correct.

Answer 1

You problem is that you have the same rule for sass and for css, sass-loader is being applied to css too.
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: ["babel-polyfill", "./src/index.js"],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}
}
]
},
{
test: /\.(scss)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
},
]
},
{
test: /\.(woff|svg|png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './assets'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({ filename: "style.css" }),
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};