javascript - 如何在全局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

Note if you want to reference a file inside an npm dependency or viawebpack alias, the path must be prefixed with ~ to avoid ambiguity

@ 是指向 ./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'));
   }
}