Skip to content

Problems compiling .vue file with scss styles #314

Open
@dparish

Description

@dparish

Great tool and fantastic work. The JS / TS build toolchain can always use something clean like this.

I can't tell if this is an issue with tsdown, the config I'm using or just my own misunderstanding.

I have a .vue file with the following style tag

<style scoped lang="scss">
@use 'sass:map';
$variants: (
  'light-blue': (
    background: #fff,
    border: rgb(var(--v-theme-neutral-200)),
    text: rgb(var(--v-theme-neutral-600)),
    title: rgb(var(--v-theme-neutral-600)),
    iconBg: rgb(var(--v-theme-blue-50)),
    iconColor: rgb(var(--v-theme-blue-300)),
    dividerColor: rgb(var(--v-theme-neutral-200)),
  ), // more variants later...
);
$cardSpacing: 20px;

.base-card {
  width: 100%;
  min-height: 200px;
  border-radius: 10px;
  box-shadow: none;

  .v-card-title,
  .v-card-text,
  .v-card-actions {
    padding: $cardSpacing;
  }

  .v-card-title {
    .card-icon {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
    }
  }

  ::v-deep(.v-divider) {
    margin: 0 $cardSpacing;
  }

  @each $name, $map in $variants {
    &.variant--#{$name} {
      background: map.get($map, background);
      border: 1px solid map.get($map, border);
      color: map.get($map, text);

      .v-card-title {
        color: map.get($map, title);

        .card-icon {
          background: map.get($map, iconBg);

          /* overrides the color for v-icon */
          ::v-deep(svg),
          ::v-deep(.v-icon) {
            fill: map.get($map, iconColor);
          }
        }
      }

      .v-divider {
        color: map.get($map, dividerColor);
      }
    }
  }
}
</style>

This is my tsdown.config

import { defineConfig } from 'tsdown'
import { Vuetify3Resolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/rollup'
import Vue from 'unplugin-vue/rolldown'

export default defineConfig([
  {
    entry: ['./src/plugins/index.ts', './src/components/index.ts'],
    platform: 'browser',
    copy: [
      {
        from: 'src/assets/*',
        to: 'dist/assets',
      },
    ],
    plugins: [Components({ resolvers: [Vuetify3Resolver()] }), Vue()],
    dts: {
      vue: true,
    },
  },
])

When I try and compile the .vue file I get:

[plugin unplugin-vue] [redacted]src/components/RpCard.vue?vue&type=style&index=0&scoped=7e80c5d2&lang.scss:83:18
CssSyntaxError: [redacted]src/components/RpCard.vue:44:18: Unknown word $name
    at Input.error ([redacted]node_modules/postcss/lib/input.js:135:16)
    at Parser.unknownWord ([redacted]node_modules/postcss/lib/parser.js:595:22)
    at Parser.other ([redacted]node_modules/postcss/lib/parser.js:437:12)
    at Parser.parse ([redacted]node_modules/postcss/lib/parser.js:472:16)
    at parse ([redacted]node_modules/postcss/lib/parse.js:11:12)
    at new LazyResult ([redacted]node_modules/postcss/lib/lazy-result.js:165:16)
    at Processor.process ([redacted]node_modules/postcss/lib/processor.js:53:14)
    at doCompileStyle ([redacted]node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19511:36)
    at Object.compileStyleAsync ([redacted]node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19431:10)
    at transformStyle (file://[redacted]node_modules/unplugin-vue/dist/core-6WmY9pT9.js:1322:40)
    at normalizeErrors (file://[redacted]node_modules/rolldown/dist/shared/src-PO2pehsE.mjs:2247:18)
    at handleOutputErrors (file://[redacted]node_modules/rolldown/dist/shared/src-PO2pehsE.mjs:4407:34)
    at transformToRollupOutput (file://[redacted]node_modules/rolldown/dist/shared/src-PO2pehsE.mjs:4401:2)
    at RolldownBuild.write (file://[redacted]node_modules/rolldown/dist/shared/src-PO2pehsE.mjs:5642:11)
    at async build (file://[redacted]node_modules/rolldown/dist/shared/src-PO2pehsE.mjs:5687:22)
    at async file://[redacted]node_modules/tsdown/dist/index.js:724:5
    at async Promise.all (index 0)
    at async rebuild (file://[redacted]node_modules/tsdown/dist/index.js:717:3)
    at async buildSingle (file://[redacted]node_modules/tsdown/dist/index.js:708:2)
    at async Promise.all (index 0) {
  errors: [Getter/Setter]

I'm guessing this is not a bug just my misunderstanding something. I've tried adding in rollup sass plugins but those don't seem to work.

Any help would be appreciated

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions