How to setup vuetify with vuetify-loader - vue.js

I'm getting the error below when I run yarn serve:
ERROR Failed to compile with 1 errors 4:03:58 p.m.
error in ./node_modules/vuetify/src/styles/main.sass
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected identifier.
╷
34 │ .v-application .red.#ef4321{
│ ^
╵
node_modules/vuetify/src/styles/generic/_colors.scss 34:29 #import
node_modules/vuetify/src/styles/generic/_index.scss 2:9 #import
/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/vuetify/src/styles/main.sass 6:9 root stylesheet
# ./node_modules/vuetify/src/styles/main.sass 4:14-194 14:3-18:5 15:22-202
# ./node_modules/vuetify/lib/presets/default/index.js
# ./node_modules/vuetify/lib/services/presets/index.js
# ./node_modules/vuetify/lib/services/index.js
# ./node_modules/vuetify/lib/framework.js
# ./node_modules/vuetify/lib/index.js
# ./src/plugins/vuetify.js
# ./src/main.js
# ./src/entry-client.js
# multi webpack-hot-middleware/client ./src/entry-client
Client errors
./node_modules/vuetify/src/styles/main.sass (./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./node_modules/vuetify/src/styles/main.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected identifier.
╷
34 │ .v-application .red.#ef4321{
│ ^
╵
node_modules/vuetify/src/styles/generic/_colors.scss 34:29 #import
node_modules/vuetify/src/styles/generic/_index.scss 2:9 #import
/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/vuetify/src/styles/main.sass 6:9 root stylesheet
SassError: SassError: Expected identifier.
╷
34 │ .v-application .red.#ef4321{
│ ^
╵
node_modules/vuetify/src/styles/generic/_colors.scss 34:29 #import
node_modules/vuetify/src/styles/generic/_index.scss 2:9 #import
/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/vuetify/src/styles/main.sass 6:9 root stylesheet
at /Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass-loader/dist/index.js:73:16
at Function.call$2 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:88152:16)
at _render_closure1.call$2 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:77577:12)
at _RootZone.runBinary$3$3 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:26142:18)
at _RootZone.runBinary$3 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:26146:19)
at _FutureListener.handleError$1 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24590:19)
at _Future__propagateToListeners_handleError.call$0 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24887:40)
at Object._Future__propagateToListeners (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:4311:88)
at _Future._completeError$2 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24715:9)
at _AsyncAwaitCompleter.completeError$2 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24107:12)
at Object._asyncRethrow (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:4065:17)
at /Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:14085:20
at _wrapJsFunctionForAsync_closure.$protected (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:4090:15)
at _wrapJsFunctionForAsync_closure.call$2 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24128:12)
at _awaitOnObject_closure0.call$2 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24120:25)
at _RootZone.runBinary$3$3 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:26142:18)
at _RootZone.runBinary$3 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:26146:19)
at _FutureListener.handleError$1 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24590:19)
at _Future__propagateToListeners_handleError.call$0 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24887:40)
at Object._Future__propagateToListeners (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:4311:88)
at _Future._completeError$2 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24715:9)
at _AsyncAwaitCompleter.completeError$2 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24107:12)
# ./node_modules/vuetify/src/styles/main.sass 4:14-194 14:3-18:5 15:22-202
# ./node_modules/vuetify/lib/presets/default/index.js
# ./node_modules/vuetify/lib/services/presets/index.js
# ./node_modules/vuetify/lib/services/index.js
# ./node_modules/vuetify/lib/framework.js
# ./node_modules/vuetify/lib/index.js
# ./src/plugins/vuetify.js
# ./src/main.js
# ./src/entry-client.js
# multi webpack-hot-middleware/client ./src/entry-client
webpack built 3690c6dc81708ab4b923 in 2915ms
I believe it has to do with vuetify-loader setup with Vuetify but I'm not sure what I'm doing wrong here. I've setup vuetify using webpack as specified here: https://vuetifyjs.com/en/getting-started/installation/#webpack-install
I also tried to modify webpack.config.js to match what is shown by the vuetify-loader docs: https://github.com/vuetifyjs/vuetify-loader,
const { VuetifyLoaderPlugin } = require('vuetify-loader')
exports.plugins.push(
new VuetifyLoaderPlugin()
)
However I'm not having any luck. I know I can also do the installation other ways but the reason I'm using the vuetify-loader is because I need to import specific vuetify components such that the vuetify styling doesn't break the styling of an existing project.

Related

React-Native-Web configuration issue: Failed to compile 'react-native-media-controls'

I'm trying to convert a project for react-native-web which is created in react-native. So I started adding react-native-web by following the docs. When I launch it in the browser after Expo start (Using this command - EXPO_WEB_DEBUG=true expo build:web) it gives me an error for some libraries.
Like below errors
Failed to compile.
./node_modules/react-native-media-controls/dist/react-native-media-controls.esm.js
Cannot find module: './assets/ic_fullscreen.png'. Make sure this package is installed.
You can install this package by running: yarn add ./assets/ic_fullscreen.png.
Failed to compile.
./node_modules/#react-native-community/progress-view/js/index.js
Cannot find module: './ProgressView'. Make sure this package is installed.
You can install this package by running: yarn add ./ProgressView.
So my question is this - Is there any way to use 2 different libraries 1 for the web and 1 for mobile platforms? If Yes, how we can do this? Can anyone guide me in this?
Update -
I followed another article and now I'm getting these errors
ERROR in ./node_modules/#react-native-community/masked-view/js/MaskedView.js 16:14
Module parse failed: Unexpected token (16:14)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const RNCMaskedView = requireNativeComponent<any>('RNCMaskedView');
|
> import { type MaskedViewProps } from './MaskedViewTypes';
|
| /**
# ./node_modules/#react-native-community/masked-view/index.js 1:0-41 3:15-25
# ./node_modules/react-native-skeleton-placeholder/lib/SkeletonPlaceholder.js 1:1702-1748
# ./src/Screens/TestScreens/AnalysisScreens/LeaderBoardScreens/TestResultScreen.tsx 1:1235-1279
# ./src/Navigation/HomeNavigator.tsx 1:844-929
# ./src/Navigation/RootNavigator.tsx 1:920-946
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./node_modules/#react-native-community/progress-view/js/index.js 3:0-55
Module not found: Error: Can't resolve './ProgressView' in '/Users/sysquare/Desktop/pariksha-native-app-web/node_modules/#react-native-community/progress-view/js'
# ./node_modules/react-native-pdf/index.js 1:1413-1461
# ./src/Screens/Pdf/PdfViewer.tsx 1:1172-1199
# ./src/Navigation/RootNavigator.tsx 1:1358-1393
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./node_modules/#sentry/react-native/dist/js/touchevents.js 74:16
Module parse failed: Unexpected token (74:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
| render() {
> return (<View style={touchEventStyles.wrapperView}
| // eslint-disable-next-line #typescript-eslint/no-explicit-any
| onTouchStart={this._onTouchStart}>
# ./node_modules/#sentry/react-native/dist/js/index.js 14:0-75 14:0-75 14:0-75
# ./src/App.tsx 1:763-794
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native-webview/lib/WebView.js 7:36
Module parse failed: Unexpected token (7:36)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // implementation which is produced by Expo SDK 37.0.0.1 implementation, with
| // similar interface than the native ones have.
> var WebView = function () { return (<View style={{
| alignSelf: 'flex-start',
| borderColor: 'rgb(255, 0, 0)',
# ./node_modules/react-native-webview/index.js 1:0-36 3:0-19 4:15-22
# ./src/Screens/WebView/TermsAndCondition.tsx 1:469-500
# ./src/Navigation/RootNavigator.tsx 1:1628-1675
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native/Libraries/BatchedBridge/BatchedBridge.js 15:19
Module parse failed: Unexpected token (15:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const MessageQueue = require('./MessageQueue');
|
> const BatchedBridge: MessageQueue = new MessageQueue();
|
| // Wire up the batched bridge on the global object so that we can call into it.
# ./src/NativeComponents/MathView/index.tsx 1:999-1060
# ./src/Screens/TestScreens/TestView.tsx 1:455-497
# ./src/Screens/TestScreens/TestScreen.tsx 1:3229-3250
# ./src/Navigation/HomeNavigator.tsx 1:1184-1228
# ./src/Navigation/RootNavigator.tsx 1:920-946
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native/Libraries/Components/UnimplementedViews/UnimplementedView.js 19:47
Module parse failed: Unexpected token (19:47)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| * View component and renders its children.
| */
> class UnimplementedView extends React.Component<$FlowFixMeProps> {
| render(): React.Node {
| // Workaround require cycle from requireNativeComponent
# ./node_modules/#react-native-community/progress-bar-android/js/RNCProgressBarAndroid.js 11:0-98
# ./node_modules/#react-native-community/progress-bar-android/js/index.js 1:0-63 1:0-63
# ./node_modules/react-native-pdf/index.js 1:1339-1394
# ./src/Screens/Pdf/PdfViewer.tsx 1:1172-1199
# ./src/Navigation/RootNavigator.tsx 1:1358-1393
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native/Libraries/Core/Devtools/getDevServer.js 13:23
Module parse failed: Unexpected token (13:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import NativeSourceCode from '../../NativeModules/specs/NativeSourceCode';
|
> let _cachedDevServerURL: ?string;
| let _cachedFullBundleURL: ?string;
| const FALLBACK = 'http://localhost:8081/';
# ./node_modules/#sentry/react-native/dist/js/integrations/debugsymbolicator.js 84:31-91
# ./node_modules/#sentry/react-native/dist/js/integrations/index.js 1:0-56 1:0-56
# ./node_modules/#sentry/react-native/dist/js/index.js 8:0-47 35:0-47
# ./src/App.tsx 1:763-794
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native/Libraries/Core/Devtools/parseErrorStack.js 13:12
Module parse failed: Unexpected token (13:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 'use strict';
|
> import type {StackFrame} from '../NativeExceptionsManager';
| import type {HermesParsedStack} from './parseHermesStack';
|
# ./node_modules/#sentry/react-native/dist/js/integrations/debugsymbolicator.js 24:36-99
# ./node_modules/#sentry/react-native/dist/js/integrations/index.js 1:0-56 1:0-56
# ./node_modules/#sentry/react-native/dist/js/index.js 8:0-47 35:0-47
# ./src/App.tsx 1:763-794
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native/Libraries/Core/Devtools/symbolicateStackTrace.js 15:12
Module parse failed: Unexpected token (15:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const getDevServer = require('./getDevServer');
|
> import type {StackFrame} from '../NativeExceptionsManager';
|
| export type CodeFrame = $ReadOnly<{
# ./node_modules/#sentry/react-native/dist/js/integrations/debugsymbolicator.js 48:46-115
# ./node_modules/#sentry/react-native/dist/js/integrations/index.js 1:0-56 1:0-56
# ./node_modules/#sentry/react-native/dist/js/index.js 8:0-47 35:0-47
# ./src/App.tsx 1:763-794
# ./index.web.js 1:240-260
ERROR in ./node_modules/react-native/Libraries/Image/resolveAssetSource.js 19:12
Module parse failed: Unexpected token (19:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const {pickScale} = require('./AssetUtils');
|
> import type {ResolvedAssetSource} from './AssetSourceResolver';
|
| let _customSourceTransformer, _serverURL, _scriptURL;
# ./src/NativeComponents/VideoPlayer/Video1.js 1:1877-1935
# ./src/Components/Video/VideoPlayer.tsx 1:1062-1114
# ./src/Screens/VideoPlayer/VideoPlayer.tsx 1:1452-1497
# ./src/Navigation/RootNavigator.tsx 1:676-721
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./storybook/stories/Button/Button.stories.tsx 8:5
Module parse failed: Unexpected token (8:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import Button from '../../../src/DesignComponents/ButtonGroup/Button';
|
> type Props = ButtonPropTypes;
| export const button: Props = {
| active: false,
# ./storybook/stories/index.js 1:0-33
# ./storybook/index.js 13:2-22
# ./src/StoryBookDeviceUI.tsx 1:263-286
# ./src/Navigation/HomeNavigator.tsx 1:1253-1284
# ./src/Navigation/RootNavigator.tsx 1:920-946
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
ERROR in ./storybook/stories/Welcome/Welcome.stories.js 6:55
Module parse failed: Unexpected token (6:55)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import Welcome from '.';
|
> storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
|
# ./storybook/stories/index.js 2:0-35
# ./storybook/index.js 13:2-22
# ./src/StoryBookDeviceUI.tsx 1:263-286
# ./src/Navigation/HomeNavigator.tsx 1:1253-1284
# ./src/Navigation/RootNavigator.tsx 1:920-946
# ./src/App.tsx 1:453-490
# ./index.web.js 1:240-260
1 error has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
webpack 5.52.0 compiled with 12 errors in 7213 ms

Many react native packages are not transpiled to es6 and include things that aren't compatible with the web. Its sometimes necessary to parse them with babel before they will run on the web.
if you run this expo will generate a webpack config for you
expo customize:web
then you can add modules to the babel loader, for example:
const createExpoWebpackConfigAsync = require("#expo/webpack-config");
// Expo CLI will await this method so you can optionally return a promise.
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(
{
...env,
babel: {
dangerouslyAddModulePathsToTranspile: [
// Add package names here to ensure they are transpiled
"#react-native-community/masked-view",
],
},
},
argv
);
return config;
};
You might notice that this is a "dangerous" method, so use with caution.
The documentation for this config option is here https://github.com/expo/expo-cli/blob/master/packages/webpack-config/README.md

BootstrapVue Unknown word Error in ./node_modules/bootstrap-vue/src/index.scss

i would like to use bootstrap vue with my own scss file for theming.
Unfortunately I always get a strange error:
ERROR Failed to compile with 1 error
error in ./node_modules/bootstrap-vue/src/index.scss
Syntax Error: SyntaxError
(1:1) Unknown word
> 1 | // --- BootstrapVue Custom SCSS ---
| ^
2 |
3 | // Requires at least the Bootstrap functions, variables and
# ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./src/assets/custom.scss 4:40-286
# ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./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=css&
# ./node_modules/vue-style-loader??ref--6-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./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=css&
# ./src/App.vue?vue&type=style&index=0&lang=css&
# ./src/App.vue
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.1.20:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
For the structure I followed exactly the docs
My custom.scss File:
$theme-colors: (
"primary": #51ff00,
"danger": #ff4136
);
#import '../../node_modules/bootstrap/scss/bootstrap.scss';
#import '../../node_modules/bootstrap-vue/src/index.scss';
and the main.js File:
// ***** Bootstrap Vue *****
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import './assets/custom.scss'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
I'm using the recommended Versions of
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.21.2",
"sass": "^1.32.13",
"sass-loader": "^10.2.0"
What could be the problem here?

Solution:
I accidentally imported my custom.scss file into my app.vue additionally
<style>
#import 'assets/custom.scss';
</style>

Vue Enterprise Boilerplate: sass-loader unable to load from updated .scss files

I'm rewriting an existing project using the latest vue enterprise boilerplate. I haven't been able to find any examples of the use of vue enterprise boilerplate so I'm doing trial and error. When using some of the existing code with large <style> blocks I'm running into compile problems importing from .scss files which are all in the directory src/design/. This code
<style lang="scss" module>
#import '#design';
.container {
#extend %relative-block;
...
throws this error
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: The target selector was not found.
Use "#extend %relative-block !optional" to avoid this error.
╷
86 │ #extend %relative-block;
│ ^^^^^^^^^^^^^^^^^^^^^^^
╵
/home/dean/src/vue/examples/rewrite.0/src/components/nav-bar.vue 86:3 root stylesheet
The relative-block exists in the design/_positioning.scss file and Intellij is able to find it
%relative-block {
position: relative;
display: block;
}
I also get errors when using sass #mixins:
#include lq-size(100%, 100%);
gives
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
╷
50 │ #include lq-size(100%, 100%);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
/home/dean/src/vue/examples/rewrite.0/src/app.vue 50:3 root stylesheet
The #mixin lq-size exists and Intellij finds it in design/_mixins.css:
#mixin lq-size($width, $height) {
width: $width;
height: $height;
}
These errors occur for code in new .scss files that I've added to the src/design/ directory, and for new code in existing .scss files.
I'm new to sass and scss. When I update a .scss file of add a new .scss file into the src/design/ folder do I have to tell the sass-loader to look for updated .scss files?

Vue bind style dynamic backgroundImage with parameter using asset

I'm trying to bind background images dynamically but there seems to be trouble compiling the assets. What's weird is that it works but no at the same time.
I've tried various solutions from SO and nothing get rids of the compilation error (which still compile based on the image above):
Vue.js dynamic images not working
VueJS v-bind:style for background-image: url()
Vue.js data-bind style backgroundImage not working
reference assets with generated style data bind
Vue dynamic background image inline component
How The Project is Set Up
Laravel Sanctum as the backend, Vue SPA for the frontend and utilising Axios for communications.
Topic.vue Component
<div
v-for="topic in topics"
:key="topic.id"
class="col-12 col-sm-6 col-lg-3 mb-4 d-flex justify-content-center"
>
<div
class="card-topic d-flex align-items-end"
:style="inlineBgImage(topic.src)"
>
<div class="card-topic__button py-3 text-center w-100">
<a href class="card-topic__link">{{ topic.title }}</a>
</div>
</div>
</div>
Script in Topic.vue
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState('topic', ['topics']),
},
created() {
this.$store.dispatch('topic/fetchTopics')
},
methods: {
inlineBgImage(src) {
let bgImage = require('#/assets' + src)
return {
backgroundImage: `url("${bgImage}")`,
}
},
},
}
</script>
In the inlineBgImage(src) methods, the background-image is successfully applied if the require is hardcoded i.e. let bgImage = require('#/assets/img/topic/myself.jpg'). Once I used the src value, it broked but still works(Failed to compile. page appear)
Assets
Below is the asset folder structure
All SCSS files are imported to app.scss which are then imported to main.js
_variables.scss
The "undefined variable" does exist
app.scss
This is how I import the _variable.scss file in app.scss; #import 'variables.scss';. The import comes first before other files.
I've also tried:
#import 'variables';
#import '_variables';
#import '_variables.scss';
It still gives out errors.
Error Details in Terminal
I want to reiterate that these errors does not appear if I hardcode the bgImage e.g. require('#/assets/img/topic/myself.jpg'). I don't understand how these changes affect the compiler.
ERROR Failed to compile with 6 errors 12:37:58 PM
error in ./src/assets/scss/card.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
16 │ background-color: $dark-blue;
│ ^^^^^^^^^^
╵
src\assets\scss\card.scss 16:23 root stylesheet
# ./src/assets/scss/card.scss 4:14-233 14:3-18:5 15:22-241
# ./src sync ^\.\/assets.*$
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue
# ./src/router/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/assets/scss/search.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
27 │ color: $blue;
│ ^^^^^
╵
src\assets\scss\search.scss 27:12 root stylesheet
# ./src/assets/scss/search.scss 4:14-235 14:3-18:5 15:22-243
# ./src sync ^\.\/assets.*$
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue
# ./src/router/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/assets/scss/image.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
33 │ color: $white;
│ ^^^^^^
╵
src\assets\scss\image.scss 33:12 root stylesheet
# ./src/assets/scss/image.scss 4:14-234 14:3-18:5 15:22-242
# ./src sync ^\.\/assets.*$
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue
# ./src/router/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/assets/scss/button.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
2 │ color: $light-blue;
│ ^^^^^^^^^^^
╵
src\assets\scss\button.scss 2:12 root stylesheet
# ./src/assets/scss/button.scss 4:14-235 14:3-18:5 15:22-243
# ./src sync ^\.\/assets.*$
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue
# ./src/router/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/assets/scss/header.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
4 │ background-color: $dark-blue;
│ ^^^^^^^^^^
╵
src\assets\scss\header.scss 4:23 root stylesheet
# ./src/assets/scss/header.scss 4:14-235 14:3-18:5 15:22-243
# ./src sync ^\.\/assets.*$
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue
# ./src/router/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/assets/scss/nav.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
6 │ color: $light-blue;
│ ^^^^^^^^^^^
╵
src\assets\scss\nav.scss 6:12 root stylesheet
# ./src/assets/scss/nav.scss 4:14-232 14:3-18:5 15:22-240
# ./src sync ^\.\/assets.*$
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue
# ./src/router/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
Other Details
The topic.src from v-for="topic in topics" will yield a String, for e.g. /img/topic/myself.jpg.

inlineBgImage(src) {
let fileExt = src.substring(src.lastIndexOf('.'))
src = src.replace('/img/', '')
src = src.replace(fileExt, '')
let bgImage = require('#/assets/img/' + src + fileExt)
return {
backgroundImage: `url("${bgImage}")`,
}
}
Kudos to skirtle for giving a solution at forum.vuejs.org. As skirtle mentioned, Webpack handles expression and fixed string parameter differently. I did change the solution a bit in case future files have different file extension. You see skirtle original answer and explanation there.

How to use stylus block level import with Vuetify styles

Using a stylus block level import:
# vuetify-style.styl
.myapp
#import '~vuetify/src/stylus/main'
This is to ensure that the vuetify css doesn't interfere with elements from other parts of the page which aren't using vuetify.
But unfortunately it doesn't work, I can't compile it.
ERROR Failed to compile with 1 errors 2:13:28 pm
error in ./src/stylus/main.styl
Module build failed (from ./node_modules/stylus-loader/index.js):
Error: node_modules/vuetify/src/stylus/settings/_el
evations.styl:85:33
81| 0px 9px 46px 8px $shadow-key-ambient-opacity
82|
83| // MIXINS
84| elevation($z, important = false)
85| box-shadow: $shadow-key-umbra[$z],
---------------------------------------^
86| $shadow-key-penumbra[$z],
87| $shadow-key-ambient[$z] (important ? !important : )
88|
cannot perform $shadow-key-umbra[((0))]
It compiles only when I delete the first line (.myapp)
Link to the issue on github: https://github.com/vuetifyjs/vuetify/issues/4864
BTW I also tried to use less and import css from the package
# vuetify-style.less
vuetify-styles {
#import (less) 'vuetify/dist/vuetify.css';
}
But in this way I also got an error:
ERROR Failed to compile with 1 errors 11:57:30 AM
error in ./src/plugins/vuetify-styles.less
Module build failed:
// load the styles
var content = require("!!../../node_modules/css-loader/index.js??ref--9-1!../../node_modules/p
ostcss-loader/lib/index.js??ref--9-2!../../node_modules/less-loader/dist/cjs.js??ref--9-3!./vu
etify-styles.less");
^
Unrecognised input
in /Users/zvadym/WorkProjects/motos_as/odin/vue/src/plugins/vuetify-styles.less (line 4,
column 12)
# ./src/plugins/vuetify-styles.less 4:14-334 13:3-17:5 14:22-342
# ./src/plugins/vuetify.js
# ./src/crm/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/crm/ma
in.js

Found a way to deal with it. Actually I just specified the full relative path to the style file
.vuetify-styles {
#import (less) '../../node_modules/vuetify/dist/vuetify.css';
}
and installed less of course npm install -D less less-loader