mrsum / webpack-svgstore-plugin

Simple svg-sprite creating with webpack
https://www.npmjs.com/package/webpack-svgstore-plugin
200 stars 92 forks source link

In production svgs not showing #107

Closed monkeychops closed 7 years ago

monkeychops commented 8 years ago

In dev mode they are being inlined and i can reference like so

In production I can see them inlined in the template, but they do not show

mrsum commented 8 years ago

@monkeychops more details plz. give me your webpack.config.js

NeXTs commented 7 years ago

@mrsum Должно быть ты должен был использовать телекинез. Поражает насколько наплевательски люди относятся к таким вещам. Ну интересовала проблема, почему не приложить немного усилий и скинуть больше инфы? В его же интересах. Что случилось.. он ее решил, но про ишью забыл? возможно не решился сбросить конфиг? либо вообще уволился с компании где стояла эта задача, в чём дело?

mrsum commented 7 years ago

@NeXTs Это же опен сорс ) тут всегда так

BenSwennen commented 7 years ago

I have the same issue when I deploy my storybook instance. Here is my webpack.config.js:

const path = require("path");
const mixins = require("../src/_mixins");
const StyleLintPlugin = require("stylelint-webpack-plugin");
const SvgStore = require("webpack-svgstore-plugin");
const variables = require("../src/_variables");

// PostCSS plugins
const cssnext = require("postcss-cssnext")({ browsers: "last 2 versions" });
const cssMixins = require("postcss-mixins")({ mixins });
const nestedCss = require("postcss-nested");
const calc = require("postcss-calc");
const simpleVars = require("postcss-simple-vars")({
  variables: () => variables,
  unknown: (node, name, result) => node.warn(result, `Unknown variable ${name}`),
});

const SvgStorePluginConfig = new SvgStore({
  svgoOptions: {
    plugins: [
      { removeTitle: true },
      { removeUselessStrokeAndFill: true },
      { removeDimensions: true },
      { cleanupNumericValues: { floatPrecision: 1 } },
      { convertColors: { currentColor: true } },
    ],
  },
});

const StyleLintPluginConfig = new StyleLintPlugin({
  configFile: ".stylelintrc.js",
  files: ["src/**/*.css"],
  failOnError: false,
});

module.exports = {
  module: {
    loaders: [
      { test: /\.css$/,
        exclude: [/src/],
        loader: "style!css",
        include: path.resolve(__dirname, "../"),
      },
      {
        test: /\.css$/,
        exclude: [/node_modules/],
        loader: "style!css?modules=1!postcss",
        include: path.resolve(__dirname, "../"),
      },
      {
        test: /\.(png|woff|woff2|svg|ttf|eot|jpg)$/,
        loader: "file",
      },
    ],
  },

  plugins: [
    StyleLintPluginConfig,
    SvgStorePluginConfig,
  ],

  postcss: () => (
    [cssnext, cssMixins, simpleVars, nestedCss, calc]
  ),
};

Can you please tell me what I am doing wrong. It works when running locally.