小编Dan*_*iel的帖子

这是我的用例:大多数svgs都应该内联.所以我设置了这样的规则:

{test: /\.svg$/, use: "svg-inline-loader"},

在某些情况下,我只想要一个svg的url而不是内联它.在webpack 1.x中,我要求他们这样:require('path/to/file.svg?external').

这是相应的规则:

{test: /\.svg\?external$/, use: "file-loader!image-webpack-loader"},

看起来webpack 2 在规则中?不再包含该部分,test因为迁移后只有第一条规则应用于我的所有 svgs.

有没有解决的办法？是否可能有不同的策略如何在相同扩展名的文件中应用不同的加载器集合require？

PS:我知道我可以要求这样的文件:require('!file-loader!image-webpack-loader!path/to/file.svg')但是我的加载器比这更复杂,我不想一直重复它们的配置.

PSS:这似乎也不起作用(它仍然只适用第一条规则)

{test: /\.svg$/, use: "svg-inline-loader", exclude: /\?external/},
{test: /\.svg$/, use: "file-loader?!image-webpack-loader", include: /\?external/}

我们假设我有一个可折叠的固定宽度边栏,如下所示:

HTML

<div class="container">
  <div class="sidebar" id="sidebar">
    SIDEBAR
  </div>
  <div class="content">
    lorem bla bla
    <button onclick="document.getElementsByClassName('sidebar')[0].classList.toggle('collapsed')">
      toggle Sidebar
    </button>
  </div>
</div>

CSS

body {
  margin:0;
}

.container {
  display: flex;
  min-height:100px;
}

.sidebar {
  position: relative;
  left: 0;
  width: 200px;
  background-color: #ccc;
  transition: all .25s;
}

.sidebar.collapsed {
  left:-200px;
  margin-right:-200px;
}

Codepen:http://codepen.io/anon/pen/pJRYJb

所以这就是问题:

我怎样才能从那里进入灵活宽度的侧边栏？

以下是约束:

• 没有javascript(我希望浏览器处理布局 - 不是我)
• 侧边栏不得与内容重叠
• 折叠时,侧边栏的右边框需要与窗口的左边框对齐(以便能够在右侧连接一个始终可见的绝对定位标签)
• 如果折叠,侧边栏的宽度不应改变,以避免在过渡期间回流
• 平滑过渡,没有任何突然跳跃
• 现代CSS(flexboxes,calc)很好

这里的主要问题是,我不能找到一种方法,说margin-right: -100%这里100%指的侧边栏的宽度

任何帮助将不胜感激!