如何在全局scss文件中实现绝对路径? VueJS

Posted

技术标签:

【中文标题】如何在全局scss文件中实现绝对路径? VueJS【英文标题】:how to implement absolute path in global scss file? VueJS 【发布时间】:2020-06-01 05:26:14 【问题描述】:

我在 vue.config.js 中有以下 webpack 配置:

const path = require("path");

module.exports = 
  pluginOptions: 
    'style-resources-loader': 
      preProcessor: 'scss',
      patterns: [
        "./src/styles/global.scss"
      ]
    ,
    configureWebpack: 
      module: 
        rules: [
          test: /\.svg$/,
          loader: 'vue-svg-loader'
        ]
      
    
  

这使我能够在我的所有 vue 组件中使用 global.scss 中定义的样式,而无需任何显式导入。

现在的问题是我在 global.scss 中定义了:

   @font-face 
    font-family: Averta-Bold;
    src: url('../assets/fonts/averta/Averta-Bold.eot'); /* IE9 Compat Modes */
    src: url('../assets/fonts/averta/Averta-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../assets/fonts/averta/Averta-Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('../assets/fonts/averta/Averta-Bold.woff') format('woff'), /* Pretty Modern Browsers */
       url('../assets/fonts/averta/Averta-Bold.ttf')  format('truetype'), /* Safari, android, ios */

并且到目前为止一直使用字体没有任何问题,直到我在 ./src/components 中创建了一个嵌套文件夹,所以它变成了 ./src/components/dashboard/ 并且在我在仪表板目录中创建了组件之后,字体无法再使用/定位,因为我必须在 global.scss 中的字体 url 前添加另一个“../”,但这会破坏所有其他组件。

如何在 global.scss 中添加绝对路径?我试过“@/assets/xxxxx”,但没用。

【问题讨论】:

你试过/assets/...没有@吗? 所有partial files在执行之前都被膨胀到main.scss中,所以你可以尝试相对于main.scss文件的filePath。 我尝试了 /assets/... 并且成功了...我不知道为什么... @ChrisG 您可以将其添加为答案 最初我的路径是从 global.scss 到字体文件位置 @ShivamSingh 之所以有效,是因为以/ 开头的相对路径将其放在主机名后面,而忽略了当前位置。而且你为什么要把@放在第一位呢? 【参考方案1】:

抱歉耽搁了。但迟到总比没有好。 https://cli.vuejs.org/guide/css.html#referencing-assets

请注意,如果您想在 npm 依赖项或通过 webpack 别名,路径必须以 ~ 为前缀,避免歧义

@ 是指向 ./src 的 webpack 别名。所以要使用它需要以~为前缀。

url('~@/assets/fonts/averta/Averta-Bold.eot'); 可以 100% 工作

如果 @ 别名不起作用或由于某种原因未设置,请转到位于项目根文件夹中的 vue.config.js 文件并添加以下内容:

const path = require('path');

module.exports = 
   chainWebpack: config => 
       config.resolve.alias.set('@', path.join(__dirname, './src'));
   

【讨论】:

以上是关于如何在全局scss文件中实现绝对路径? VueJS的主要内容,如果未能解决你的问题,请参考以下文章

如何在 VueJS 中实现 Google 登录 API?

如何在VueJs中实现html元素的拖放

关于Vite配置preprocessorOptions.scss.additionalData全局引入scss文件无效问题

如何在 laravel 中实现 vuetify?

Shell脚本中实现切换用户并执行命令操作

如何在 Apache 中实现适用于所有虚拟主机的全局 RewriteCond / RewriteRule?