时间戳

首页 > 解决方案 > Lightbox2 CSS Webpack 无法解决

npm - Lightbox2 CSS Webpack 无法解决

问题描述

我正在使用带有 NPM 和 webpack 的灯箱。

我像往常一样导入 SCSS

//lightbox2
@import '~lightbox2/dist/css/lightbox.min';

但是 webpack 然后给了我这个错误

webpack_1        |         ERROR in ./app/app.scss (/node_modules/css-loader/dist/cjs.js!/node_modules/postcss-loader/src!/node_modules/sass-loader/dist/cjs.js!./app/app.scss)
webpack_1        |         Module not found: Error: Can't resolve '../images/close.png' in '/app/assets/app'
webpack_1        |          @ ./app/app.scss (/node_modules/css-loader/dist/cjs.js!/node_modules/postcss-loader/src!/node_modules/sass-loader/dist/cjs.js!./app/app.scss) 33:37-67

具体来说，它无法解析图像，因为 Lightbox.min.css 包含对“../images/close.png”的引用

现在，我想知道将这些图像放在我的文件夹配置中的哪个位置，以便它们可以被 webpack 解析。

当然它应该自动识别/从 node_modules 加载，但是我试图在 app 文件夹中放置一个带有相关图像的图像文件夹，但它没有解决

任何想法，将不胜感激。

标签： npmwebpacksasslightboxlightbox2

解决方案

方法1：修改webpack.config.js

  • 我们使用resolve-url-loaderto 提供了Sass所缺少的“url 重写”。在转译器（如 sass-loader）之后使用它。它利用源映射来查找原始源文件并重写 url() 语句。
module.exports = {
  // .. configuration

  module: { 
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          { loader: 'style-loader' }, 
          { 
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          }, 
          { loader: 'resolve-url-loader'},
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            }
          },
        ],
      },
    ]
  },


  
};

方法2：验证file-loader库是否安装配置：

npm install -D 文件加载器

module.exports = {
  // .. configuration

  module: { 
    rules: [
      // .. other rules
      {
        test: /\.(svg|jpeg|gif|png|jpg)$/, // lightbox2 requires png and gif images to be imported
                                           // ensure `node_modules` folder is not excluded
        use: {
          loader: 'file-loader',
          options: {
            name: "[name].[ext]",
            outputPath: "Images"
          }
        },
      },
      // .. yet other rules
    ]
  }

推荐阅读