search

swisnl / vue-cli-plugin-svg-sprite

vue-cli 3 plugin to build an SVG sprite
MIT License
68 stars 11 forks source link

Import from scss dosen't work #8

Closed electfreak closed 5 years ago

electfreak commented 5 years ago

Detailed description

I import .svg file from .scss and it dosen't work in browser

My environment

Node.js 10.16.0, vue --version 3.7.0, chrome, mac os

My repo project https://gitlab.com/electfreak/pilulkin You can see problem in src/scss/base.scss (there is only one bg-image with url), src/components, so you can see my vue.config.js and other webpack options

JaZo commented 5 years ago

Using SVG in CSS requires you to disable the plainSprite option in pluginOptions. This creates a special sprite based on SVG stacking technique. Please note that some users are experiencing issues with this: https://github.com/kisenka/svg-sprite-loader/issues/324

electfreak commented 5 years ago

Using SVG in CSS requires you to disable the plainSprite option in pluginOptions. This creates a special sprite based on SVG stacking technique. Please note that some users are experiencing issues with this: kisenka/svg-sprite-loader#324

Sorry but deleting this option from code or changing flag to 'false' value didn't give positive result. Url still '[object Module]' in browser and in styles (also in production mode and in build mode)

JaZo commented 5 years ago

That's exactly the issue I referred to. It's an issue with the loader this plugin adds to your Webpack config.

electfreak commented 5 years ago

That's exactly the issue I referred to. It's an issue with the loader this plugin adds to your Webpack config.

Sorry, I can't understand. You said that I should disable the plainSprite option in configuration (like I understood) and I done it, but next you said that it is the problem with loader (svg-sprite-loader?). So can I use your (Stas's loader based) plugin (in css / scss / etc) or there is bug that make it impossible? Thank you for your answers.

JaZo commented 5 years ago

Currently there is an issue, the one i referred to, with svg-sprite-loader in CSS, so no at the moment you can't use this vue-cli-plugin for what you want to do.

electfreak commented 5 years ago

Currently there is an issue, the one i referred to, with svg-sprite-loader in CSS, so no at the moment you can't use this vue-cli-plugin for what you want to do.

Ok, thank you very much, Jasper. Problem is only with vue cli, yes?

JaZo commented 5 years ago

No, the issue is with the Webpack loader that this plugin adds to your Webpack config. This plugin is merely a wrapper around that. So if you manually add it to your Webpack config, the issue still exists.

electfreak commented 5 years ago

Sorry for my stupid, do you mean Stas's plugin svg-sprite-loader when say 'problem with loader that this plugin adds...', so problem with svg-sprite-loader firstly? I'm just curious.

No, the issue is with the Webpack loader that this plugin adds to your Webpack config. This plugin is merely a wrapper around that. So if you manually add it to your Webpack config, the issue still exists.

JaZo commented 5 years ago

Yes, that's the loader I mean.