problem with svg in scss

[vAhyThe]

Hi,

if i have svg like background-image: url("./img/some.svg");
it dont works now after i install vue-svg-loader
and its private Cannot GET /Applications/someproject/src/components/somecomponent/img/some.svg
some hints ??

thx for reply

[damianstasik]

@vAhyThe Could you share your webpack config?

[vAhyThe]

var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
var StyleLintPlugin = require('stylelint-webpack-plugin')
process.noDeprecation = true
const { basename } = require('path');

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  plugins: [
    new StyleLintPlugin('./stylelintrc.js'),
  ],
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.svg$/,
        loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x
        options: {
          // optional [svgo](https://github.com/svg/svgo) options
          svgo: {
            plugins: [
              {removeComments: true},
              {removeTitle: true},
              {removeEditorsNSData: true},
              {
                prefixIds: {
                  prefix: (node, {path}) => basename(path, '.svg'),
                  delim: '-',
                }
              }
            ]
          }
        }
      }
    ],
    loaders: [
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader', 'resolve-url-loader']
      }, {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
      }
    ]
  }
}

[damianstasik]

I don't see anything wrong here, if you are trying to use SVG as a CSS background, then just ensure that the path is correct.

[vAhyThe]

path is correct can i somehow tell in config not to compile route in scss ??

[Kansuler]

I have the same problem. When SCSS tries to resolve an svg asset it doesn't get the publicPath from webpack, but instead it gets the actual file system path and that is not correct.

[damianstasik]

@vAhyThe @Kansuler I am sorry for the super delayed response! Do you still have this issue?

[vAhyThe]

@visualfanatic yes, but its not crucial.
Because its best to use svg inline and thats what this plugin do. :)
But will be good to have without any complication.

[jag1989]

Just wanting to add to on, this is still happening for me also.

background-image: url("../../assets/images/svg/name.svg");
resoloves to:
background-image: url(/Users/username/www/path/src/assets/images/svg/name.svg)

with the following rule:
{ test: /\.svg$/, loader: 'vue-svg-loader', options: { svgo: { plugins: [{ removeViewBox: false, removeDoctype: true, removeComments: true, cleanupIDs: false }, ] } } }

[zhuzhuaicoding]

#77

[vadimjoy]

My solution is to organize svg namespace (inline.name.svg) and share loader for them:

chainWebpack: config => {
        const svgRule = config.module.rule('svg');
        inlineSvgRule = config.module.rule('inline-svg');

        svgRule
            .exclude
            .add(/inline\.(.*)\.svg/)
            .end()

        inlineSvgRule
            .test(/inline\.(.*)\.svg/)
            .use('vue-svg-loader')
            .loader('vue-svg-loader')
    }

equal:

{
    test: /\.(svg)(\?.*)?$/,
    exclude: [
        /inline\.(.*)\.svg/
    ],
    use: [{
        loader: 'file-loader',
        options: {
            name: 'img/[name].[hash:8].[ext]'
        }
    }]
},
{
    test: /inline\.(.*)\.svg/,
    use: [{
        loader: 'vue-svg-loader'
    }]
}

[dukhevych]

I decided not to add svg rule to webpack and use webpack-loader-syntax to import svg as Vue components. Like this:

import icon from '!vue-svg-loader!@/assets/icon/icon.svg';