如何在全局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的主要内容,如果未能解决你的问题,请参考以下文章
关于Vite配置preprocessorOptions.scss.additionalData全局引入scss文件无效问题