Could not build project with vue cli 3 template due to svg in css

Question

While moving to vue-cli 3 I encountered following problem. I import a plugin's css to my app.scss.

This line: background-image: url(default-skin.svg); breaks yarn build, which throws this error:

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ReferenceError: navigator is not defined

Here is my vue.config.js:

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 => {
    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')
  }
}

Any solution?

update

The css which breaks yarn build

Package.json:

{
  "name": "f2c",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "Victor Ponamariov <[email protected]>",
  "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": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

App folder structure:

Answer 1

I don't have a fix or full explanation, but there is a workaround...

The problem seems to be caused by postcss-import when importing the CSS file from inside a <style> tag of an SFC:

// App.vue
<style lang="scss">
  @import 'app.scss'; /* imports default.css -> default-skin.svg */
</style>

You can workaround the build error by moving the import into the <script> tag (or to main.js):

// App.vue
<script>
  import 'app.scss'; /* imports default.css -> default-skin.svg */
</script>

see GitHub repo