-
-
Notifications
You must be signed in to change notification settings - Fork 6.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add a vue-cli resolve-url-loader example #2099
Comments
Have you tried <style lang="scss" src="font-awesome/scss/font-awesome.scss"></style> |
Hi, thanks for the quick answer. <style lang="scss" src="font-awesome/scss/font-awesome"></style> <style lang="scss" src="~font-awesome/scss/font-awesome"></style> <style lang="scss" src="../../node_modules/font-awesome/scss/font-awesome"></style> All of them outputs something like
Edit : Create a reproduction repository : https://github.com/Hebilicious/vue-cli-relative-url-import-issue-test |
Forgot to mention you cannot omit the |
Works like a charm for my use case, thanks a lot! <style lang="scss" src="font-awesome/scss/font-awesome.scss"></style>
<style lang="scss">
@import "sheet/that/uses/fontawesome";
//...
</style> |
Did you figure out how to add a loader after the |
@RehanSaeed I didn't find a clean way to do it. However I didn't need to do it to achieve what I wanted, but if you really do need that feature it might be worth re-opening this or creating a new similar issue. |
Anybody got a solution to this with the new vue.config.js format? |
Yes @benkiefer but it's not working :( config.module
.rule('scss')
.oneOf('vue')
.use('resolve-url-loader')
.loader('resolve-url-loader').options({
keepQuery: true
})
.before('sass-loader') |
After googleing towards found the solution!
so just write the following under what I wrote in my previous comment: config.module
.rule('scss')
.oneOf('vue')
.use('sass-loader')
.loader('sass-loader')
.tap(options => ({
...options,
sourceMap: true,
sourceMapContents: false
})) |
Sorry for bumping a super old issue again, but here's what I ended up with to add resolve-url-loader to all the rules: ['vue-modules', 'vue', 'normal-modules', 'normal'].forEach(rule => {
config.module.rule('scss')
.oneOf(rule)
.use('resolve-url-loader')
.loader('resolve-url-loader')
.before('sass-loader')
.end()
.use('sass-loader')
.loader('sass-loader')
.tap(options =>
merge(options, {
sourceMap: true
})
);
}); It's basically the same as what @cstuncsik posted but all in one go :) |
If someone else lands here and like me has no idea what to do with these magical snippets of code that should fix your problem: You're supposed to put a module.exports = {
chainWebpack: (config) => {
['vue-modules', 'vue', 'normal-modules', 'normal'].forEach(rule => {
config.module.rule('scss')
.oneOf(rule)
.use('resolve-url-loader')
.loader('resolve-url-loader')
.before('sass-loader')
.end()
.use('sass-loader')
.loader('sass-loader')
.tap(options =>
({...options, sourceMap: true})
);
});
},
} Note that this is @callumacrae's solution without the dependency on |
I have been struggling with this issue all day and it sucks supremely. I have tried two dozen different ways of trying to do the simplest damn thing — include a global stylesheet via webpack. And it has been a complete and total nightmare. I love Vue but this is making me hate it. None of the solutions here or anywhere else work for me. |
Same question than @dreusel why this not work out of the box? It was painful to make relative path work for url's! |
Thanks! I wish they would just make |
To make this work a new sass variable was declared, eos-components-fonts-path, that's used to calculate the real path of the fonts. In the template-ui it's easier to fix because we're using vue-cli and we can modify the way the css is loaded, so in this case we use the module resolve-url-loader to make it work the relative path. vuejs/vue-cli#2099 (comment) In the case of the plugin vue modules, I was unable to find the way to use the resolve-url-loader, but I was able to fix the problem just setting the variable to the real eos-components fonts path.
What problem does this feature solve?
Looking for similar things in the issues, the only one I could find was this one #1019.
I'll use font awesome to illustrate :
This is the project structure :
/node_modules/font-awesome
/src/folder/MyComponent.vue
This style bloc in MyComponent.vue:
Throws this error :
EDIT : Here's a reproduction repository : https://github.com/Hebilicious/vue-cli-relative-url-import-issue-test
The font files are relative to '~font-awesome/scss/font-awesome', but webpack tries to resolve them relatively to 'MyComponent.vue'.
https://github.com/bholloway/resolve-url-loader solve this problem elegantly, but it needs to be 'placed' directly right after css loader :
According to https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-loader
I don't see any straightforward way to do it for all the styling related rules for vue cli with chain webpack.
There's a possible (very) dirty workaround, which is to modify @vue/cli-service/lib/config.css.js :
Other ways to go around the problem is to actually have the assets at the relative path file from your source files, or to modify the font-awesome import statements, which isn't ideal.
What does the proposed API look like?
If there's a way to do it currently with chain webpack, documenting it would be very helpful.
Otherwise this ...
...would be ideal.
The text was updated successfully, but these errors were encountered: