I recently built a Vue app following this tutorial but without CRUD functionality: .
The app was created using Vue CLI 4.3.1 with vue create.
During local development, it runs smoothly with npm run serve and builds without any errors.
Now, I'm attempting to deploy the app through an Azure pipeline to an Azure web app. The YAML configuration I'm using is provided below. Everything seems to progress fine until it reaches the devBuild stage (vue-cli-service lint & vue-cli-service build --mode dev), where the deployment fails due to missing dependencies related to CSS files for the welcome and home components. Interestingly, other components in the same directory with CSS files do not encounter this issue. I've tried various methods like using require("./home.css") at the top or changing path references within style tags, but nothing seems to resolve the problem:
<style scoped>
@import "./home.css";
</style>
<style scoped>
@import "@/home.css";
</style>
<style scoped>
@import "home.css";
</style>
The elusive nature of these two CSS files causing the problem perplexes me as no other files seem to trigger such issues during deployment.
Error encountered during deployment:
These dependencies were not found:
* -!../../node_modules/@vue/cli-service/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/index.js??ref--6-oneOf-1-2!./home.css in ./node_modules/@vue/cli-service/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/components/Home.vue?vue&type=style&index=0&id=8dc7cce2&scoped=true&lang=css&
* -!../../node_modules/@vue/cli-service/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/index.js??ref--6-oneOf-1-2!./welcome.css in ./node_modules/@vue/cli-service/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/components/Welcome.vue?vue&type=style&index=0&id=d4b7673c&scoped=true&lang=css&
YAML configuration used for the Azure pipeline:
# Node.js with Vue
# Build a Node.js project that uses Vue.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript
trigger:
- main
pool:
vmImage: 'ubuntu-latest'
steps:
- task: NodeTool@0
inputs:
versionSpec: '13.7'
displayName: 'Install Node.js'
- script: |
npm install
displayName: 'npm install'
- script: |
npm run devBuild
displayName: 'npm dev build'
## Copy the client to the staging directory
- task: CopyFiles@2
inputs:
SourceFolder: '$(System.DefaultWorkingDirectory)'
Contents: '**'
TargetFolder: '$(Build.ArtifactStagingDirectory)'
cleanTargetFolder: true
- task: AzureRmWebAppDeployment@4
inputs:
ConnectionType: 'AzureRM'
azureSubscription: 'my-serviceconnection'
appType: 'webApp'
WebAppName: 'my-test'
packageForLinux: '$(Build.ArtifactStagingDirectory)'
AppSettings: '-SCM_DO_BUILD_DURING_DEPLOYMENT true -WEBSITE_RUN_FROM_PACKAGE 1'
RemoveAdditionalFilesFlag: trueContent of the package.json file:
{
"name": "my.site",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"devBuild": "vue-cli-service lint & vue-cli-service build --mode dev",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@okta/okta-vue": "^2.0.0",
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.6.5",
"css-loader": "^3.6.0",
"eslint": "^7.18.0",
"jquery": "^3.5.1",
"vue": "^2.6.11",
"vue-router": "^3.1.6"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.18.0",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true,
"browser": true,
"es6": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"ecmaVersion": 9,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"modules": true
}
},
"rules": {
"keyword-spacing": 2
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}