title: Could not build project with vue cli 3 template due to svg in css
body: <p>While moving to vue-cli 3 I encountered following problem.
  I import a plugin's css to my app.scss.</p>
  
  <p>This line: <code>background-image: url(default-skin.svg);</code> breaks <code>yarn build</code>, which throws this error:</p>
  
  <pre><code>Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
  ReferenceError: navigator is not defined
  </code></pre>
  
  <p>Here is my vue.config.js:</p>
  
  <pre><code>const path = require('path')
  const webpack = require('webpack')
  const CopyWebpackPlugin = require('copy-webpack-plugin')
  const SpriteLoaderPlugin = require('svg-sprite-loader/plugin')
  
  const ASSETS_DIR = 'static'
  
  module.exports = {
    assetsDir: ASSETS_DIR,
    runtimeCompiler: true,
    chainWebpack: config =&gt; {
      config
        .plugin('provide-plugin')
          .use(webpack.ProvidePlugin, [{
            axios: "axios",
            $: "jquery",
            jQuery: "jquery",
            _: "lodash",
            mapGetters: ['vuex', 'mapGetters'],
            mapActions: ['vuex', 'mapActions']
          }])
          .end()
        .plugin('copy-plugin')
          .use(CopyWebpackPlugin, [
            [{
              from: path.resolve(__dirname, 'static'),
              to: ASSETS_DIR,
              ignore: ['.*']
            }]
          ])
          .end()
        .plugin('sprite-loader-plugin')
          .use(SpriteLoaderPlugin)
  
      config.module
        .rule('svg')
          .test(/\.svg$/)
          .use('file-loader')
            .loader('svg-sprite-loader')
    }
  }
  </code></pre>
  
  <p>Any solution?</p>
  
  <p><strong>update</strong></p>
  
  <p><a href="https://github.com/dimsemenov/PhotoSwipe/blob/master/dist/default-skin/default-skin.css" rel="noreferrer">The css which breaks yarn build</a></p>
  
  <p>Package.json:</p>
  
  <pre><code>{
    "name": "f2c",
    "version": "1.0.0",
    "description": "A Vue.js project",
    "author": "Victor Ponamariov &lt;victor.ponamariov@gmail.com&gt;",
    "private": true,
    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
    },
    "dependencies": {
      "animate.css": "^3.6.1",
      "axios": "^0.18.0",
      "blueimp-canvas-to-blob": "^3.14.0",
      "fabric": "^2.3.3",
      "flexboxgrid": "^6.3.1",
      "intl-tel-input": "^12.4.0",
      "jquery": "^3.3.1",
      "libphonenumber-js": "^1.2.21",
      "lodash": "^4.17.10",
      "masonry-layout": "^4.2.1",
      "moment": "^2.22.2",
      "nprogress": "^0.2.0",
      "perfect-scrollbar": "^1.4.0",
      "photoswipe": "^4.1.2",
      "portal-vue": "^1.3.0",
      "raven-js": "^3.25.2",
      "sharer.js": "^0.3.3",
      "stickyfilljs": "^2.0.5",
      "tippy.js": "^2.5.2",
      "vee-validate": "^2.0.6",
      "vue": "^2.5.2",
      "vue-analytics": "^5.14.0",
      "vue-carousel": "^0.9.0",
      "vue-clipboard2": "^0.1.1",
      "vue-cropperjs": "^2.2.0",
      "vue-gtm": "^1.0.2",
      "vue-i18n": "^8.0.0",
      "vue-infinite-loading": "^2.3.3",
      "vue-infinite-scroll": "^2.0.2",
      "vue-meta": "^1.5.2",
      "vue-mq": "^0.2.1",
      "vue-multiselect": "^2.1.0",
      "vue-perfect-scrollbar": "^0.1.0",
      "vue-popperjs": "^1.2.6",
      "vue-router": "^3.0.1",
      "vue-select": "^2.4.0",
      "vue-slider-component": "^2.7.4",
      "vue-social-sharing": "^2.3.3",
      "vue-star-rating": "^1.6.0",
      "vue-sweetalert2": "^1.5.2",
      "vue-tippy": "^2.0.18",
      "vue-yandex-metrika": "^1.6.1",
      "vuex": "^3.0.1"
    },
    "devDependencies": {
      "@vue/cli-plugin-babel": "^3.0.0-rc.5",
      "@vue/cli-plugin-eslint": "^3.0.0-rc.5",
      "@vue/cli-service": "^3.0.0-rc.5",
      "copy-webpack-plugin": "^4.5.2",
      "node-sass": "^4.9.2",
      "normalize.css": "^8.0.0",
      "postcss-import": "^11.1.0",
      "postcss-url": "^7.3.2",
      "sass-loader": "^7.0.3",
      "svg-sprite-loader": "^3.8.0",
      "vue-template-compiler": "^2.5.16",
      "webpack-svgstore-plugin": "^4.0.3"
    },
    "eslintConfig": {
      "root": true,
      "env": {
        "node": true
      },
      "extends": [
        "plugin:vue/essential",
        "eslint:recommended"
      ],
      "globals": {
        "$": false,
        "jQuery": false,
        "_": false,
        "axios": false,
        "VK": false,
        "gapi": false,
        "FB": false,
        "mapGetters": false,
        "mapActions": false
      },
      "rules": {},
      "parserOptions": {
        "parser": "babel-eslint"
      }
    },
    "postcss": {
      "plugins": {
        "autoprefixer": {},
        "postcss-import": {},
        "postcss-url": {}
      }
    },
    "browserslist": [
      "&gt; 1%",
      "last 2 versions",
      "not ie &lt;= 8"
    ]
  }
  </code></pre>
  
  <p>App folder structure:</p>
  
  <p><a href="https://i.stack.imgur.com/GULW3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/GULW3.png" alt="enter image description here"></a></p>