时间戳

首页 > 解决方案 > React 动画滑块 + webpack + scss 和 css

css - React 动画滑块 + webpack + scss 和 css

问题描述

我从头开始构建反应应用程序。我正在尝试从 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;

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

标签： cssreactjswebpack

解决方案

你的问题是你对 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"
        })
    ]
};

推荐阅读