React动画滑块+ webpack + scss和css
React动画滑块+ webpack + scss和css
提问于 2018-08-21 01:42:48
我从头开始构建了react应用程序。我试图从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"
})
]
};slider.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;app.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;我想捆绑一定出了什么问题，我不知道。另外，我的控制台告诉我一切都是正确的。
回答 1
Stack Overflow用户
发布于 2018-08-21 03:49:55
你的问题是，你对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"
})
]
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51935980
复制相关文章
相似问题
腾讯云开发者
