使用 webpack 为 react-image-gallery 导入 CSS 时出错

【问题标题】：Error on import CSS for react-image-gallery with webpack使用 webpack 为 react-image-gallery 导入 CSS 时出错
【发布时间】：2019-09-24 05:17:40
【问题描述】：

我正在尝试为 react-image-gallery 包导入 CSS，但出现以下错误：

我做错了什么？

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

From react-image-gallery docs:

SCSS

@import "node_modules/react-image-gallery/styles/scss/image-gallery.scss";

CSS

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

网页包

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

根据上面的文档，我目前正在尝试：

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

我的 webpack.config：

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

CSS 文件：

@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; } }

【问题讨论】：

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

标签： javascript css reactjs


【解决方案1】：

经过 2 小时的努力，我找到了解决问题的方法。

我的问题是我想立即导入 documentation 中的包和样式。

这样

npm install react-image-gallery
@import "~react-image-gallery/styles/scss/image-gallery.scss";

但是，我没有从 webpack 配置它，结果，我得到了以下错误。

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-image-gallery 样式。我已经包含了来自 node_modules 的路径，而不是 src/assets。

这是我在样式路径中添加的规则。

   {
     include: path.resolve(__dirname, './node_modules/react-image-gallery/styles/scss/image-gallery.scss'),
     test: /\.(s[ac]ss|css)$/i,
     use: [
       'style-loader',
       'css-loader',
       'sass-loader',
     ],
   },

webpack.config.babel.js

import path from 'path';
import Dotenv from 'dotenv-webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const webpack = {
  mode: 'development',
  entry: path.resolve(__dirname, 'src/index'),
  output: {
    path: path.resolve(__dirname, 'dist/'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        use: ['babel-loader'],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        include: path.resolve(__dirname, 'src'),
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
      {
        include: path.resolve(__dirname, './src/assets'),
        test: /\.(s[ac]ss|css)$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
      {  // I 've added a new rule and I included the style path from node_modules
        include: path.resolve(__dirname, './node_modules/react-image-gallery/styles/scss/image-gallery.scss'),
        test: /\.(s[ac]ss|css)$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public/'),
    historyApiFallback: true,
    port: 4000,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    }),
    new Dotenv({
      path: './.env',
      safe: true,
      systemvars: true,
      silent: true,
      defaults: false,
    }),
  ],
  node: {
    fs: 'empty',
  },
};
export default webpack;

提醒：记得安装以下包 - 样式加载器， - CSS加载器， - 萨斯加载器，

【讨论】：

    【解决方案2】：

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

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

    问题是我只在css-loader 和style-loader 中加入了src 文件夹。但是我尝试导入的 CSS 位于 node_modules 文件夹中。所以我也需要包括在内。因此，通过不使用 include 条件，我将包含来自任何文件夹的 CSS。

    【讨论】：

      猜你喜欢
      • 2022-01-23
      • 2013-08-14
      • 2022-07-20
      • 2020-02-16
      • 2018-09-25
      • 2021-08-10
      • 2021-06-18
      • 2020-11-06
      • 2019-01-15
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode