Question

我从头开始构建React应用。我正在尝试从npm包中为我的网站添加react动画滑块。不幸的是，仅显示图像-但一个显示在另一个下方，我的意思是不是一行显示-导航箭头也在图像上方，即使附加了样式也是如此。当我将此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;

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

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

React动画滑块+ Webpack + CSS和CSS

1 个答案: