[1329] Issue with single file components and css loader

I have a project using semantic-ui. It is installed by npm and I changed the folder where the semantic files are generated to assets.

So in my assets folder I have a file like: assets/semantic/dist/components/grid.css.

In my component, I include the components I need:

<template lang="pug">
  .ui.card
    .image
      img(v-bind:src="product.ThumbUrl")

    .content
      .header {{ product.Name }}
      .meta {{ product.Price }} $
      .description {{ product.Description }}

    .extra.content
      a.snipcart-add-item(
        href='#',
        data-item-url='/',
        v-bind:data-item-name='product.Name',
        v-bind:data-item-price='product.Price',
        v-bind:data-item-id='product._id',
        v-bind:data-item-image='product.ThumbUrl',
        v-bind:data-item-description='product.Description')
        i.fa.fa-cart-plus
        |  Add to cart
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
      required: true
    }
  }
}
</script>

<style lang="css">
  @import '~assets/semantic/dist/components/card.css';
</style>

<style lang="less" scoped>
  .card {
    width: auto;

    .image {
      margin: 0 auto;
      width: 200px;
    }
  }
</style>

My build script on Netlify is: npm install && npm run generate.

However, I have errors that the file assets/semantic/dist/components/card.css can't be found.

Is there anything I am doing wrong?