0

I have a project using the Vue CLI with the webpack-simple template. I'm pulling in an NPM package that I'm working on that provides sass files. Some of the sass files have url's to images within the NPM propject. Here is an example of the style in the NPM package.

background: url("../../../assets/icons/icon-close-blue.svg") no-repeat center;

The image icon-close-blue.svg is located in the NPM package relative to the SCSS file.

I'm pulling the scss file to my project like this

@import "~@chewy/design-system/src/design-system.scss";

When I start up the dev server with yarn I get this error.

./node_modules/extract-text-webpack-plugin/dist/loader.js?
{"omit":1,"remove":true}!./node_modules/vue-style-
loader!./node_modules/css-loader!./node_modules/vue-loader/lib/style-
compiler?{"vue":true,"id":"data-v-
7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-
loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?
type=styles&index=0&bustCache!./src/App.vue
Module build failed: ModuleNotFoundError: Module not found: Error: 
Can't resolve '../../../assets/icons/checkmark-green.svg' in 
'/Users/dsteinberg/Code/chewy-design-platform/src'

Here is my webpack config

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  entry: {
    src: './src/main.js',
    pages: './src/pages.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: 'http://localhost:8080/dist/',
    filename: '[name].build.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: ExtractTextPlugin.extract({
              use: ['css-loader', 'sass-loader'],
              fallback: 'vue-style-loader'
            }),
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader',
          options: {
            attrs: [':data-src']
          }
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '/static/img/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '/static/media/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '/static/fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map',
  plugins: [
    new ExtractTextPlugin("[name].style.css")
  ]
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

Here is a screenshot of the NPM folder structure and the scss file with the url.

Is there anything I can do to get webpack to handle these image paths?

Doug Steinberg
  • 1,122
  • 14
  • 32

0 Answers0