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

Question

我在 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”，但没有成功。

Answer 1

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

请注意，如果您想引用 npm 依赖项内的文件或通过 webpack 别名引用文件，则路径必须以 ~ 为前缀以避免歧义

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

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'));
   }
}