first of all thank you for any help, you are awesome. I am struggling with this setup to make url referenced resources from scss work correctly. I mean to load by webpack and make them work in development environment and in production too.
We have Laravel project with Vue frontend and what we do is that laravel is in charge of building views and providing data needed, while Vue provides building blocks kind of UI components resource.
This Vue part is also using company ui library based on quasar framework (quasar is irrelevant to this issue). So it is UI library shared across company projects.
ISSUE: I cannot make work that styles loaded from ui library which are referencing resources (fonts, images) are not able to load them.
These relative modules were not found:
* ../assets/fonts/BebasNeue-Web.eot in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&, ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=scss&
This is how the scss file looks like in ui-library
$ui-imagesPath: '../assets/images/';
$ui-fontsPath: '../assets/fonts/';
@font-face {
font-family: BebasNeue;
src: url('#{$ui-fontsPath}BebasNeue-Web.eot');
src: url('#{$ui-fontsPath}BebasNeue-Web.eot?#iefix')
format('embedded-opentype'),
url('#{$ui-fontsPath}BebasNeue-Web.woff2') format('woff2'),
url('#{$ui-fontsPath}BebasNeue-Web.woff') format('woff'),
url('#{$ui-fontsPath}BebasNeue-Web.ttf') format('truetype');
/* url('#{$ui-fontsPath}BebasNeue-Web.svg#BebasNeue-Web') format('svg')}'); */
font-weight: normal;
font-style: normal;
font-display: swap;
}
$ui-font-family-generic: Arial, Helvetica, sans-serif;
$ui-font-family-base: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI',
Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
$ui-font-family-secondary: BebasNeue, Helvetica, Arial, sans-serif;
$ui-logo-bg: url('#{$ui-imagesPath}logo.png');
I was trying to solve it by configuring webpack in vue.config.js
chainWebpack: config => {
// Source: github.com/vuejs/vue-cli/issues/2099#issuecomment-544877183
['vue-modules', 'vue', 'normal-modules', 'normal'].forEach(rule => {
config.module
.rule('scss')
.oneOf(rule)
.use('resolve-url-loader')
.loader('resolve-url-loader')
.tap(options =>
_.merge(options, {
sourceMap: true,
})
)
.before(SASS_LOADER)
.end()
.use(SASS_LOADER)
.loader(SASS_LOADER)
.tap(options =>
_.merge(options, {
sourceMap: true,
})
)
.end();
});
config.module
.rule('fonts')
.test(/\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/)
.use('file-loader')
.loader('file-loader')
.tap(options =>
_.merge(options, {
name: '[name].[ext]',
outputPath: 'fonts/',
publicPath: 'assets/fonts/',
})
)
.end();
},
and
css: {
loaderOptions: {
// source: https://stackoverflow.com/a/51475617/861615
css: {
url: false
},
scss: {
sassOptions: {
includePaths: [
path.resolve(__dirname, "./src/styles"),
path.resolve(__dirname, "./src/ui-library/styles")
]
},
// include variables into every component
prependData: `
@import "ui-lib_vars";
`
}
}
}
but it does not load resources
I need solution which loads those fonts images in local development and also it would be correct when I build to dist. I could not break urls from common shared folder between Laravel and Vue.
Minimal reproduction here: https://github.com/luckylooke/laravel-vue-cli
EDIT 30/3/2020: chain description: ./src/components/HelloWorld.vue has attribute which is prepended by @import "ui-lib_vars" as configured in sass-loader options
prependData: `
@import "ui-lib_vars";
`
in ui-lib_vars $ui-logo-bg: url('#{$ui-imagesPath}logo.png'); where $ui-imagesPath: '../assets/images/'; which is corret relative path to the resource.
When I turn off css loader option "url: false", the situation is following:
ERROR Failed to compile with 1 errors 9:10:27 AM
This relative module was not found:
\* ../assets/images/logo.png in ./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/resolve-url-loader??ref--8-oneOf-1-3!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=scss&
Type checking in progress...
what is interesting that fonts are referenced the same and they dont argue about "module was not found" but they does not load correctly either.. they loads some unknown basic font and there are warnings in console
localhost/:1 Failed to decode downloaded font: data:font/woff2;base64,bW9kdWxlLmV4cG9ydHMgPSAiYXNzZXRzL2ZvbnRzL0JlYmFzTmV1ZS1XZWIud29mZjIiOw==
localhost/:1 Failed to decode downloaded font: data:font/woff;base64,bW9kdWxlLmV4cG9ydHMgPSAiYXNzZXRzL2ZvbnRzL0JlYmFzTmV1ZS1XZWIud29mZiI7
localhost/:1 Failed to decode downloaded font: data:font/ttf;base64,bW9kdWxlLmV4cG9ydHMgPSAiYXNzZXRzL2ZvbnRzL0JlYmFzTmV1ZS1XZWIudHRmIjs=
12OTS parsing error: invalid version tag
otherwise, leaving option "url: false" there.. the situation is as described above in first version of the question
Any help appreciated, thanks.