如何在全局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/，在我在dashboard目录中创建组件后，字体就不能再使用/定位了，因为我必须在global.scss中的字体url前面加上另一个"../"，但这会破坏所有其他组件。

如何在global.scss中添加绝对路径？我尝试过"@@assets/xxxxxx"，但没有成功。

Answer 1

很抱歉耽误时间。但迟到总比不到好。https://cli.vuejs.org/guide/css.html#referencing-资产

注意，如果您想引用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'));
}
}