Lightbox2 CSS Webpack Cant Resolve

Question

I am using lightbox with NPM and webpack.

I import the SCSS like so, as I would normally do

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

but webpack then gives me this error

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

specifically, it cannot resolve the image as Lightbox.min.css includes a reference to a '../images/close.png'

Now, Im wondering where to put these images in my folder config so that they do get resolved by webpack.

Surely it should recognise / load from node_modules automatically, but Ive tried to put a images folder with the relevant images in the app folder and it does not resolve

Any ideas would be appreciated.

Answer 1

Method1: Modify the webpack.config.js

• We use the resolve-url-loader to provides the "url rewriting" that Sass is missing. Use it after the transpiler (such as sass-loader). It makes use of the source-map to find the original source file and rewrite url() statements.

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,
            }
          },
        ],
      },
    ]
  },


  
};

Method2: Verify whether the file-loader library is installed and configured:

npm install -D file-loader

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
    ]
  }