Skip to content

Using scss additionalData to import results in an error #199

Closed
@akhlivnoy

Description

@akhlivnoy

Description

Adding @import .scss common file using Vite defineConfig leads to error "Property 'prop_name' does not exist on type '{}'."

To Reproduce

  1. Add to defineConfig next options (no matter alias, absolute or relative path):
defineConfig({
    ...,
    css: {
      modules: {
        localsConvention: 'camelCaseOnly',
      },
      preprocessorOptions: {
        scss: {
          additionalData: "@import 'src/app/styles/variables';",
        },
      },
    },
  });
  1. Use any variable from imported file in any another scss file.

Expected behavior

image

But got

image

Note that before the variable is used, everything is fine

Also

Using @import 'styles/variables'; manually in file solves the problem, but only using alias path
vite.config.ts

defineConfig({
    ...,
    resolve: {
      alias: {
        styles: path.resolve(__dirname, './src/app/styles'),
      },
    },
  });

tsconfig.json

{
  "compilerOptions": {
    ...,
    "paths": {
      "styles": ["app/styles"],
      "styles/*": ["app/styles/*"],
    },
    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "classnameTransform": "camelCaseOnly",
        }
      }
    ]
  }
}

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions