Javascript 使用网页包导入react图像库的CSS时出错_Javascript_Css_Reactjs

Javascript 使用网页包导入react图像库的CSS时出错

javascript css reactjs

Javascript 使用网页包导入react图像库的CSS时出错,javascript,css,reactjs,Javascript,Css,Reactjs,我正在尝试导入react image gallery软件包的CSS，出现以下错误：我做错了什么我需要CSS预处理器加载器吗 SCSS CSS 网页包根据上述文档，我目前正在尝试： import "react-image-gallery/styles/css/image-gallery.css"; My webpack.config： module: { rules:[ { test: /\.css$/, // include: path

我正在尝试导入react image gallery软件包的CSS，出现以下错误：

我做错了什么

我需要CSS预处理器加载器吗

SCSS CSS 网页包根据上述文档，我目前正在尝试：

import "react-image-gallery/styles/css/image-gallery.css";

My webpack.config：

module: {
    rules:[
      {
        test: /\.css$/,
        // include: path.resolve(__dirname, 'src'), (IT WORKS WHEN YOU REMOVE THIS LINE)
        use: ['style-loader','css-loader'],
      },

我得到的错误是：

CSS文件：

错误出现在这一行： My webpack.config：

module: {
    rules:[
      {
        test: /\.css$/,
        // include: path.resolve(__dirname, 'src'), (IT WORKS WHEN YOU REMOVE THIS LINE)
        use: ['style-loader','css-loader'],
      },

问题是我只在css加载器和样式加载器中包含src文件夹。但是我尝试导入的CSS位于node_modules文件夹中。所以我也需要包括这一点。因此，通过不使用include条件，我可以从任何文件夹中包含CSS。

经过两个小时的努力，我找到了问题的解决方案

我的问题是，我想立即导入软件包和样式，因为它在应用程序中

像这样

npm安装映像库 @导入~react image gallery/styles/scss/image-gallery.scss；但是，我没有从网页上配置它，因此，我得到了以下错误

ERROR in ./node_modules/react-image-gallery/styles/scss/image-gallery.scss 1:16
Module parse failed: Unexpected token (1:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> $ig-small-screen: 768px !default;
| $ig-xsmall-screen: 480px !default;
| $ig-white: #fff !default;
 @ ./src/views/accommodation/ViewSpecificAccommodation.js 8:0-60
 @ ./src/App.js
 @ ./src/index.js

谢谢，@cbdeveloper的支持

我的解决方案是在webpack.config.babel.js配置中添加react图像库样式。我已经包含了来自node_模块的路径，而不是src/assets

这是我用样式路径添加的规则

{ 包括：path.resolve\u dirname'。/node\u modules/react image gallery/styles/scss/image gallery.scss'，测试：/\.s[ac]ss|css$/i，使用：[ “样式加载器”， “css加载程序”， “sass loader”， ], }, webpack.config.babel.js

从“路径”导入路径；从“Dotenv网页包”导入Dotenv；从“html网页包插件”导入HtmlWebpackPlugin；常量网页包={ 模式:"发展",，条目：path.resolve\u dirname，“src/index”，输出：{ 路径：path.resolve__dirname，“dist/”，文件名：“bundle.js”，公共路径：“/”， }, 模块：{ 规则：[ { 测试：/\.js$/,，包括：path.resolve\uuu dirname，“src”，用法：['babel-loader']， }, { 测试：/\.png| jpe？g|gif$/i，包括：path.resolve\uuu dirname，“src”，使用：[ { 加载器：“文件加载器”， }, ], }, { 包括：path.resolve\u dirname'./src/assets'，测试：/\.s[ac]ss|css$/i，使用：[ “样式加载器”， “css加载程序”， “sass loader”， ], }, {//我已经添加了一个新规则，并且包含了来自node_模块的样式路径包括：path.resolve\u dirname'。/node\u modules/react image gallery/styles/scss/image gallery.scss'，测试：/\.s[ac]ss|css$/i，使用：[ “样式加载器”， “css加载程序”， “sass loader”， ], }, ], }, 决心：{ 扩展：['*'、'.js'、'.jsx']， }, 开发服务器：{ contentBase:path.resolve__dirname，“public/”，历史上的倒退：是的，港口：4000， }, 插件：[ 新HtmlWebpackPlugin{ 模板：“public/index.html”， }, 新多滕{ 路径：'./.env'，安全：是的， systemvars：是的，沉默：是的，默认值：false， }, ], 节点：{ 财政司司长：‘空置’， }, }; 导出默认网页包；提醒：请记住安装以下软件包 -样式加载器， -css加载器，

-sass loader，

我的webpack.config文件中的include属性似乎有错误。。。如何正确配置css加载程序？

module: {
    rules:[
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'src'),
        use: ['style-loader','css-loader'],
      },

ERROR in ./node_modules/react-image-gallery/styles/css/image-gallery.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> @charset "UTF-8";
| /*!
|   Ionicons, v2.0.0

@charset "UTF-8";
/*!
  Ionicons, v2.0.0
  Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
  https://twitter.com/benjsperry  https://twitter.com/ionicframework
  MIT License: https://github.com/driftyco/ionicons

  Android-style icons originally built by Google’s
  Material Design Icons: https://github.com/google/material-design-icons
  used under CC BY http://creativecommons.org/licenses/by/4.0/
  Modified icons to fit ionicon’s grid from original.
*/
@font-face {
  font-family: "Ionicons";
  src: url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.0");
  src: url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"), url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.0") format("truetype"), url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.0") format("woff"), url("https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.0#Ionicons") format("svg");
  font-weight: normal;
  font-style: normal; }

.image-gallery-fullscreen-button::before,
.image-gallery-play-button::before,
.image-gallery-left-nav::before,
.image-gallery-right-nav::before {
  display: inline-block;
  font-family: "Ionicons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.image-gallery {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent; }
  .image-gallery.fullscreen-modal {
    background: #000;
    bottom: 0;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 5; }
    .image-gallery.fullscreen-modal .image-gallery-content {
      top: 50%;
      transform: translateY(-50%); }

.image-gallery-content {
  position: relative;
  line-height: 0;
  top: 0; }
  .image-gallery-content.fullscreen {
    background: #000; }
    .image-gallery-content.fullscreen .image-gallery-slide {
      background: #000; }

.image-gallery-slide-wrapper {
  position: relative; }
  .image-gallery-slide-wrapper.left, .image-gallery-slide-wrapper.right {
    display: inline-block;
    width: calc(100% - 113px); }
    @media (max-width: 768px) {
      .image-gallery-slide-wrapper.left, .image-gallery-slide-wrapper.right {
        width: calc(100% - 84px); } }
  .image-gallery-slide-wrapper.image-gallery-rtl {
    direction: rtl; }

.image-gallery-fullscreen-button,
.image-gallery-play-button,
.image-gallery-left-nav,
.image-gallery-right-nav {
  appearance: none;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
  position: absolute;
  z-index: 4; }
  .image-gallery-fullscreen-button::before,
  .image-gallery-play-button::before,
  .image-gallery-left-nav::before,
  .image-gallery-right-nav::before {
    color: #fff;
    line-height: .7;
    text-shadow: 0 2px 2px #1a1a1a;
    transition: color .2s ease-out; }
  .image-gallery-fullscreen-button:hover::before,
  .image-gallery-play-button:hover::before,
  .image-gallery-left-nav:hover::before,
  .image-gallery-right-nav:hover::before {
    color: #337ab7; }
    @media (max-width: 768px) {
      .image-gallery-fullscreen-button:hover::before,
      .image-gallery-play-button:hover::before,
      .image-gallery-left-nav:hover::before,
      .image-gallery-right-nav:hover::before {
        color: #fff; } }

.image-gallery-fullscreen-button,
.image-gallery-play-button {
  bottom: 0; }
  .image-gallery-fullscreen-button::before,
  .image-gallery-play-button::before {
    font-size: 2.7em;
    padding: 15px 20px;
    text-shadow: 0 1px 1px #1a1a1a; }
    @media (max-width: 768px) {
      .image-gallery-fullscreen-button::before,
      .image-gallery-play-button::before {
        font-size: 2.4em; } }
    @media (max-width: 480px) {
      .image-gallery-fullscreen-button::before,
      .image-gallery-play-button::before {
        font-size: 2em; } }
  .image-gallery-fullscreen-button:hover::before,
  .image-gallery-play-button:hover::before {
    color: #fff;
    transform: scale(1.1); }
    @media (max-width: 768px) {
      .image-gallery-fullscreen-button:hover::before,
      .image-gallery-play-button:hover::before {
        transform: none; } }

.image-gallery-fullscreen-button {
  right: 0; }
  .image-gallery-fullscreen-button::before {
    content: ""; }
  .image-gallery-fullscreen-button.active::before {
    content: ""; }
  .image-gallery-fullscreen-button.active:hover::before {
    transform: scale(0.9); }

.image-gallery-play-button {
  left: 0; }
  .image-gallery-play-button::before {
    content: ""; }
  .image-gallery-play-button.active::before {
    content: ""; }

.image-gallery-left-nav,
.image-gallery-right-nav {
  color: #fff;
  font-size: 5em;
  padding: 50px 15px;
  top: 50%;
  transform: translateY(-50%); }
  .image-gallery-left-nav[disabled],
  .image-gallery-right-nav[disabled] {
    cursor: disabled;
    opacity: .6;
    pointer-events: none; }
  @media (max-width: 768px) {
    .image-gallery-left-nav,
    .image-gallery-right-nav {
      font-size: 3.4em;
      padding: 20px 15px; } }
  @media (max-width: 480px) {
    .image-gallery-left-nav,
    .image-gallery-right-nav {
      font-size: 2.4em;
      padding: 0 15px; } }

.image-gallery-left-nav {
  left: 0; }
  .image-gallery-left-nav::before {
    content: ""; }

.image-gallery-right-nav {
  right: 0; }
  .image-gallery-right-nav::before {
    content: ""; }

.image-gallery-slides {
  line-height: 0;
  overflow: hidden;
  position: relative;
  white-space: nowrap; }

.image-gallery-slide {
  background: #fff;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; }
  .image-gallery-slide.center {
    position: relative; }
  .image-gallery-slide img {
    width: 100%; }
  .image-gallery-slide .image-gallery-description {
    background: rgba(0, 0, 0, 0.4);
    bottom: 70px;
    color: #fff;
    left: 0;
    line-height: 1;
    padding: 10px 20px;
    position: absolute;
    white-space: normal; }
    @media (max-width: 768px) {
      .image-gallery-slide .image-gallery-description {
        bottom: 45px;
        font-size: .8em;
        padding: 8px 15px; } }

.image-gallery-bullets {
  bottom: 20px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  width: 80%;
  z-index: 4; }
  .image-gallery-bullets .image-gallery-bullets-container {
    margin: 0;
    padding: 0;
    text-align: center; }
  .image-gallery-bullets .image-gallery-bullet {
    appearance: none;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 0 #1a1a1a;
    cursor: pointer;
    display: inline-block;
    margin: 0 5px;
    outline: none;
    padding: 5px; }
    @media (max-width: 768px) {
      .image-gallery-bullets .image-gallery-bullet {
        margin: 0 3px;
        padding: 3px; } }
    @media (max-width: 480px) {
      .image-gallery-bullets .image-gallery-bullet {
        padding: 2.7px; } }
    .image-gallery-bullets .image-gallery-bullet.active {
      background: #fff; }

.image-gallery-thumbnails-wrapper {
  position: relative; }
  .image-gallery-thumbnails-wrapper.thumbnails-wrapper-rtl {
    direction: rtl; }
  .image-gallery-thumbnails-wrapper.left, .image-gallery-thumbnails-wrapper.right {
    display: inline-block;
    vertical-align: top;
    width: 108px; }
    @media (max-width: 768px) {
      .image-gallery-thumbnails-wrapper.left, .image-gallery-thumbnails-wrapper.right {
        width: 81px; } }
    .image-gallery-thumbnails-wrapper.left .image-gallery-thumbnails, .image-gallery-thumbnails-wrapper.right .image-gallery-thumbnails {
      height: 100%;
      width: 100%;
      left: 0;
      padding: 0;
      position: absolute;
      top: 0; }
      .image-gallery-thumbnails-wrapper.left .image-gallery-thumbnails .image-gallery-thumbnail, .image-gallery-thumbnails-wrapper.right .image-gallery-thumbnails .image-gallery-thumbnail {
        display: block;
        margin-right: 0;
        padding: 0; }
        .image-gallery-thumbnails-wrapper.left .image-gallery-thumbnails .image-gallery-thumbnail + .image-gallery-thumbnail, .image-gallery-thumbnails-wrapper.right .image-gallery-thumbnails .image-gallery-thumbnail + .image-gallery-thumbnail {
          margin-left: 0; }
  .image-gallery-thumbnails-wrapper.left {
    margin-right: 5px; }
    @media (max-width: 768px) {
      .image-gallery-thumbnails-wrapper.left {
        margin-right: 3px; } }
  .image-gallery-thumbnails-wrapper.right {
    margin-left: 5px; }
    @media (max-width: 768px) {
      .image-gallery-thumbnails-wrapper.right {
        margin-left: 3px; } }

.image-gallery-thumbnails {
  overflow: hidden;
  padding: 5px 0; }
  @media (max-width: 768px) {
    .image-gallery-thumbnails {
      padding: 3px 0; } }
  .image-gallery-thumbnails .image-gallery-thumbnails-container {
    cursor: pointer;
    text-align: center;
    transition: transform .45s ease-out;
    white-space: nowrap; }

.image-gallery-thumbnail {
  display: inline-block;
  border: 4px solid transparent;
  transition: border .3s ease-out;
  width: 100px; }
  @media (max-width: 768px) {
    .image-gallery-thumbnail {
      border: 3px solid transparent;
      width: 75px; } }
  .image-gallery-thumbnail + .image-gallery-thumbnail {
    margin-left: 2px; }
  .image-gallery-thumbnail .image-gallery-thumbnail-inner {
    position: relative; }
  .image-gallery-thumbnail img {
    vertical-align: middle;
    width: 100%; }
  .image-gallery-thumbnail.active {
    border: 4px solid #337ab7; }
    @media (max-width: 768px) {
      .image-gallery-thumbnail.active {
        border: 3px solid #337ab7; } }

.image-gallery-thumbnail-label {
  box-sizing: border-box;
  color: white;
  font-size: 1em;
  left: 0;
  line-height: 1em;
  padding: 5%;
  position: absolute;
  top: 50%;
  text-shadow: 1px 1px 0 black;
  transform: translateY(-50%);
  white-space: normal;
  width: 100%; }
  @media (max-width: 768px) {
    .image-gallery-thumbnail-label {
      font-size: .8em;
      line-height: .8em; } }

.image-gallery-index {
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  line-height: 1;
  padding: 10px 20px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 4; }
  @media (max-width: 768px) {
    .image-gallery-index {
      font-size: .8em;
      padding: 5px 10px; } }

module: {
    rules:[
      {
        test: /\.css$/,
        // include: path.resolve(__dirname, 'src'), (IT WORKS WHEN YOU REMOVE THIS LINE)
        use: ['style-loader','css-loader'],
      },

ERROR in ./node_modules/react-image-gallery/styles/scss/image-gallery.scss 1:16
Module parse failed: Unexpected token (1:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> $ig-small-screen: 768px !default;
| $ig-xsmall-screen: 480px !default;
| $ig-white: #fff !default;
 @ ./src/views/accommodation/ViewSpecificAccommodation.js 8:0-60
 @ ./src/App.js
 @ ./src/index.js