React animated slider + webpack + scss and css

Question

我从头开始构建了反应应用程序。我正在尝试从 npm 包为我的网站添加反应动画滑块。不幸的是，只显示图像 - 但一个在另一个下面，我的意思是不在一行中 - 导航箭头也在图像上方，即使附加了样式。当我将这个 npm 包与 create-react-app 一起使用时，它工作正常，正如预期的那样，但在我自己的样板中它坏了。我在寻求帮助。这是我的代码：

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"
})
]
};

滑块.js组件：

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;

应用.js组件：

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;

我想捆绑一定有问题，我不知道。我的控制台也告诉一切正确。

Answer 1

你的问题是你对sass和css有相同的规则，sass-loader也应用于css。

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"
})
]
};