vue2-datepicker losing styling import

Question

I'm using vue2-datepicker for a project and everything works great locally. When I deploy out to the server through a release on Azure DevOp and access the project there, the datepicker loses the styling. I'm importing an override stylesheet to our view for some minor changes for the datepicker and that stylesheet is then importing the vue2-datepicker index.scss.

views/home.vue
<style lang="scss">
@import 'src/design/variables.scss';
@import 'src/design/scss/index.scss';
</style

override stylesheet

//override styles here..
@import '~vue2-datepicker/scss/index.scss

We are building it as a web component so as part of the build we are using

npm run build:wc

Our azure-pipelines.yaml looks something like this:

steps:

task: NodeTool@0 inputs: versionSpec: '12.18.1' displayName: 'Install Node.js'

script: | npm install npm run build:wc displayName: 'install project and build web component'

Levi Lu-MSFT Levi Lu-MSFT · Accepted Answer · 2021-02-12T06:52:00

It seems like the css files are missing in your build artifacts. Please check if these css files are existing in the build artifacts(the files deployed to your server).

Please trying publish all your source files(not just the dist folder) as artifacts and deploy to the server.

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'

- task: CopyFiles@2
  inputs:
    sourceFolder: $(System.DefaultWorkingDirectory)
    Contents: '**' #copy all your source files
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: PublishBuildArtifacts@1
  inputs: 
    PathtoPublish: $(Build.ArtifactStagingDirectory) # dist or build files
    ArtifactName: 'www' # output artifact named www

vue2-datepicker losing styling import

1 Answers