代码之家  ›  专栏  ›  技术社区  ›  Vucko

vue cli-在静态文件中包含来自assets文件夹的映像

  •  13
  • Vucko  · 技术社区  · 6 年前

    是否可以包括图像 assets/ 在某种静止状态下 .scss 文件,作为 background-image ?

    我有一个 _buttons.scss 部分和一些按钮有一个图标,我想添加为 背景图像 . 图标位于 src/assets/ 福德。

    应用程序结构:

    - src
      - assets
        some_icon.svg
      - components
      - scss
        _buttons.scss
        main.scss
      - views
      App.vue
      main.js
      router.js
    

    而在 扣件 :

    .some-selector {
        background-image: url(../assets/some_icon.svg)
    
        /* also tried
        background-image: url(./assets/some_icon.svg)
        background-image: url(/assets/some_icon.svg)
        background-image: url(assets/some_icon.svg)
        */
    }
    

    返回一个错误 This relative module was not found .

    我知道我可以简单地在我的组件或主app.vue中添加这些样式(范围与否),但是,我想知道如果没有这些样式,这是否可以实现?

    我也知道我可以在我的 public 文件夹,但我希望图标保留在 资产/ 文件夹。

    $ vue -V
    $ 3.0.0-rc.5
    

    也许是自定义的Webpack配置?

    谢谢

    1 回复  |  直到 6 年前
        1
  •  21
  •   K48 Jesús Petrona Castro    6 年前

    您可以通过以下方式进行管理:

    background-image: url('~@/assets/some_icon.svg');
    

    这里的钥匙正在使用 ~@ 作为一个前缀。前缀为~的URL被视为模块请求。如果要利用Webpack的模块解析配置,则需要使用此前缀。例如,如果SRC文件夹的解析别名等于 @ ,如果使用vue-cli3,则可以使用此类型的URL强制Webpack解析为assets文件夹中所需的资产。更多信息在这里: handling static assets