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

【问题标题】：how to implement absolute path in global scss file? VueJS如何在全局scss文件中实现绝对路径？ 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
之所以有效，是因为以/ 开头的相对路径将其放在主机名后面，而忽略了当前位置。而且你为什么要把@放在第一位呢？

标签： javascript css vue.js sass path

【解决方案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'));
   }
}

【讨论】：