react js上的样式导入（使用webpack）

Posted 2023-03-06

【中文标题】react js上的样式导入（使用webpack）

【英文标题】：Style import (with webpack) on react js

【发布时间】：2022-01-23 04:28:25

【问题描述】：

我正在做一个 React 项目，我正在尝试使用这个库(https://www.npmjs.com/package/react-image-gallery)

从 npm 和文档中，他们说我们必须添加这些指令来导入 CSS

我的组件

import React from 'react'
import "~react-image-gallery/styles/css/image-gallery.css";
import "~react-image-gallery/styles/scss/image-gallery.scss";
import ImageGallery from 'react-image-gallery';
 export  function Features() 


const images = [
    
      original: 'https://picsum.photos/id/1018/1000/600/',
      thumbnail: 'https://picsum.photos/id/1018/250/150/',
    ,
    
      original: 'https://picsum.photos/id/1015/1000/600/',
      thumbnail: 'https://picsum.photos/id/1015/250/150/',
    ,
    
      original: 'https://picsum.photos/id/1019/1000/600/',
      thumbnail: 'https://picsum.photos/id/1019/250/150/',
    ,
  ];
return (
  
     
    <div>
      <ImageGallery items=images />;
  
    </div>
   )
 

我的包 json

"dependencies": 
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@mui/icons-material": "^5.2.4",
    "@mui/material": "^5.2.4",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-image-gallery": "^1.2.7",
    "react-material-ui-carousel": "^3.1.1",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.0.2",
    "react-scripts": "4.0.3",
    "redux-thunk": "^2.4.1",
    "styled-components": "^5.3.3",
    "web-vitals": "^1.0.1"
,

但是当我在我的组件中添加它时，它给了我这个错误

如果没有解决办法，请给我一个类似这样的库的名字

【参考方案1】：

谢谢大家，问题已解决 我将此添加到组件中

导入“react-image-gallery/styles/css/image-gallery.css”；

  import React from 'react'
import "react-image-gallery/styles/css/image-gallery.css";
import ImageGallery from 'react-image-gallery';
import ImgGallery from "./Styled.js"
export  function ShopDetails() 


    const images = [
        
          original: 'https://picsum.photos/id/1018/1000/600/',
          thumbnail: 'https://picsum.photos/id/1018/250/150/',
        ,
        
          original: 'https://picsum.photos/id/1015/1000/600/',
          thumbnail: 'https://picsum.photos/id/1015/250/150/',
        ,
        
          original: 'https://picsum.photos/id/1019/1000/600/',
          thumbnail: 'https://picsum.photos/id/1019/250/150/',
           ,
         ];
         return (
      
         
          <ImgGallery>
          <ImageGallery thumbnailPosition="left" useBrowserFullscreen=false 
          showPlayButton=false autoPlay=true items=images />;
      
        </ImgGallery>
        )
          

【讨论】：

所以你已经修复了你的导入，路径中的“~”对 css-loader 有特殊意义，但对 JS 导入没有意义。见***.com/questions/39535760/…

【参考方案2】：

您必须只从库中导入组件，而不是 css 或 scss 文件。 例如import ImageGallery from 'react-image-gallery'，然后像往常一样在下面使用<ImageGallery/>。

如果不成功则尝试将css/scss文件导入index.js

【讨论】：

如果我不调用样式文件滑块不起作用，我尝试了这两种情况

你知道有什么类似的库名吗？

有一个库叫做Swiper link 它有各种风格的轮播滑块。

我知道，但我无法控制垂直框。或者更确切地说，它没有我想要的相似形状