Mqx•5mo ago

Import SCSS in TS files

Hey, I am currently building a template for web development and I want to use ESBuild as a bundler. I use lit in combination with SASS. For SASS files I use the esbuild-sass-plugin from npm in Deno. This works fine and ESBuild successfully resolves and bundles the .scss files imported into the .ts files. However deno-ts marks the default import as red because it is not valid js/ts how can I specify this in the config for Deno so that the files get recognized as SCSS files/plain text?

import style from „style.scss“
//     ^ Works but is red because style.scss does not have a default export.

import style from „style.scss“
//     ^ Works but is red because style.scss does not have a default export.

36 Replies

Deno AI Helper•5mo ago

I wasn't able to find the answer to your question in the official Deno documentation. However, based on the code snippet you've provided, I noticed that the quotation marks around style.scss are not the standard quotation marks used in JavaScript/TypeScript. You should use either single quotes ', double quotes ", or backticks

 for string literals.

Here's the corrected line with standard double quotes:

 for string literals.

Here's the corrected line with standard double quotes:

ts import style from "style.scss";

``

Please note that this advice is not based on the Deno documentation, and I would advise you to double-check the accuracy of this advice. Since Deno does not have built-in support for importing

.scss

 files directly in TypeScript, you might need to use a plugin or a different method to handle SCSS files. You may also need to configure Deno to ignore type checking for these imports, possibly by using a

deno.json configuration file with an import_map that includes the SCSS files, or by using a TypeScript declaration file (.d.ts`) to declare the module and its default export. However, these are general suggestions and should be verified for their compatibility with Deno.

Helpful Links: Importing & Exporting - Deno by Example You Don't Need a Build Step Deno 1.4 Release Notes Web Frameworks | Deno Docs

Mqx•5mo ago

The quotes are because I wrote it from mobile. In the real script are the correct quotes.

Deno AI Helper•5mo ago

🦕 Oops! Can you pinpoint where I went wrong to help me improve? 📈

Deno AI Helper•5mo ago

Understood, thank you for clarifying that the quotes are correct in your actual script. Since you're using ESBuild and the esbuild-sass-plugin to handle the SCSS imports, and Deno's TypeScript is raising an error due to the non-standard import, you might consider creating a TypeScript declaration file (.d.ts) to tell Deno's type system what to expect when importing .scss files. This won't affect your runtime but will silence the TypeScript errors in your editor. Here's an example of what the declaration file could look like:

// styles.d.ts
declare module "*.scss" {
  const content: string;
  export default content;
}

// styles.d.ts
declare module "*.scss" {
  const content: string;
  export default content;
}

You would place this file somewhere in your project where it can be included in your TypeScript compilation context. This tells TypeScript that when it sees an import for a .scss file, it should treat it as a module that has a default export of type string. Please note that this is a general TypeScript suggestion and not specific to Deno. Since Deno does not have built-in support for SCSS, this workaround is commonly used in the TypeScript ecosystem to handle non-code assets. Remember to double-check this approach for compatibility with your Deno project.

Mqx•5mo ago

How do I import it/use the declaration.d.ts file? Do I need to import this into my tsconfig order deno.jsonc?

Deno AI Helper•5mo ago

🦕💚 I'm glad I was able to help!

Deno AI Helper•5mo ago

In Deno, you don't typically use a tsconfig.json file as you would in a Node.js environment. Instead, Deno uses a deno.json or deno.jsonc configuration file to specify various settings. For TypeScript declaration files, you don't need to import them directly into your TypeScript files or reference them in your deno.jsonc. Instead, you should ensure that the declaration file is in your project's root or included in your project structure where Deno's TypeScript compiler can automatically pick it up. Here's what you can do: 1. Place your styles.d.ts file in the root of your project or in a directory that's included in your project. 2. Deno will automatically include all .d.ts files in the project when type-checking, as long as they are in the import graph or in the same directory as the files being checked. If you have a more complex project structure and you want to be explicit about including your type declaration files, you can use an import statement in a TypeScript file that's part of your project's main dependency graph:

/// <reference path="./path/to/your/styles.d.ts" />

/// <reference path="./path/to/your/styles.d.ts" />

This triple-slash directive tells TypeScript to include the referenced declaration file in the compilation context. However, this is generally not necessary unless you're encountering issues with the compiler not detecting your declaration files. Remember, the styles.d.ts file is only for type declarations to help the TypeScript compiler understand the types of your imports. It won't affect the runtime behavior of your code, and you don't need to import it like a regular module in your .ts files. The compiler will use it to resolve types for .scss imports automatically. 🦕

Helpful Links: Importing JSON - Deno by Example Types and Type Declarations | Deno Docs First Steps | Deno Docs Importing & Exporting - Deno by Example

Mqx•5mo ago

Thanks I will try that 👍🏻

Deno AI Helper•5mo ago

🦕💚 I'm glad I was able to help!

Deno AI Helper•5mo ago

You're welcome! If you have any more questions or run into any issues, feel free to ask. Good luck with your project, and happy coding with Deno! 👍🏻🦕

Helpful Links: Deno, the next-generation JavaScript runtime Deno Community Deno Docs Backups | Deno Docs

Deno AI Helper•5mo ago

🦕💚 I'm glad I was able to help!

Mqx•5mo ago

Okay I have created a file in my root directory called "declarations.d.ts" but this does not work. It is still red.

Deno AI Helper•5mo ago

I wasn't able to find the answer to your question in the official Deno documentation. However, based on your message, if you've created a declarations.d.ts file and it's not resolving the issue with the TypeScript error, there are a couple of things you might want to check: 1. Ensure that the declarations.d.ts file is correctly named and placed in the root directory of your project where Deno can easily find it. 2. Verify that the content of your declarations.d.ts file matches the expected syntax for declaring a module, like so:

// declarations.d.ts
declare module "*.scss" {
  const content: string;
  export default content;
}

// declarations.d.ts
declare module "*.scss" {
  const content: string;
  export default content;
}

3. Make sure there are no typos in the file name or the module declaration syntax. If after checking these points the issue persists, it's possible that there might be other factors at play that are not covered by the advice provided here. This advice is not based on the Deno documentation, and I would advise you to double-check the accuracy of this advice. If the problem continues, you may need to look for more specific guidance related to Deno's handling of TypeScript declaration files or seek assistance from the Deno community.

Helpful Links: error: No config file found in VS Code - Deno Types and Type Declarations | Deno Docs Deno Docs Changing the source directory | Fresh docs

Mqx•5mo ago

I have checken everything and it still does not work…

Deno AI Helper•5mo ago

I'm sorry to hear that the issue persists. Since I wasn't able to find the answer to your question in the official Deno documentation, and the advice provided has not resolved the issue, it may be beneficial to seek assistance from the Deno community. The Deno community can be a great resource, with many experienced developers who may have encountered similar issues. You can reach out to the community through various channels such as the Deno Discord server, Deno's official forum, or GitHub discussions. When reaching out, be sure to provide as much context as possible, including: - The exact error message you're seeing. - The contents of your declarations.d.ts file. - The structure of your project. - The version of Deno you're using. - Any other relevant configuration details. This information will help others understand your problem better and provide more targeted assistance. Remember, the advice given here is not based on the Deno documentation, so double-checking with the community may lead you to a solution that is specific to Deno's environment.

Helpful Links: Deno 1.39: The Return of WebGPU Page Not Found | Deno Docs Page Not Found | Deno Docs Page Not Found | Deno Docs

Mqx•5mo ago

I have created a "modules.d.ts" file in the root of my project. Inside of the file is the following content:

declare module '*.scss' {
  const content: string;
  export default content;
}

declare module '*.scss' {
  const content: string;
  export default content;
}

I also included the .d.ts file under the types in the tsconfig. But it still does not work

Deno AI Helper•5mo ago

I apologize for the confusion earlier. Since Deno does not use tsconfig.json for its configuration and instead uses deno.json or deno.jsonc, specifying the .d.ts file under the types in tsconfig won't have any effect in a Deno project. The modules.d.ts file you've created should be automatically recognized by Deno's TypeScript compiler if it's in the root of your project. However, if you're still seeing the error, it's possible that the editor you're using might not be correctly integrated with Deno or might be using its own TypeScript server. Here are a few things you can check: 1. Make sure your editor is configured to use Deno's language server. If you're using Visual Studio Code, for example, you should have the official Deno extension installed and enabled for your workspace. 2. Ensure that your modules.d.ts file is saved and that there are no typos in the file name or its content. 3. Restart your editor to make sure it picks up the new modules.d.ts file. If after checking these points the issue still occurs, it might be a good idea to reach out to the Deno community for further assistance. Since the advice provided here is not based on the Deno documentation, it's important to double-check the accuracy of this advice with the community or other Deno-specific resources. They might be able to provide more insight into why the TypeScript error is still showing up in your project.

Helpful Links: Deno Docs Deno Docs Deno 1.4 Release Notes Deno Docs

Mqx•5mo ago

I have checked all of that. But it still does not work. This is how I’m import the scss file:

import style from 'style.scss';

import style from 'style.scss';

Style is red marked with: "file has no default export" the path tho the file is not red and gets resolved.

Deno AI Helper•5mo ago

I wasn't able to find the answer to your question in the official Deno documentation. However, based on your message, it seems that the TypeScript language server is not recognizing the custom module declaration for .scss files that you've defined in your modules.d.ts file. Given that the path to the file is resolved correctly, but the import is marked with "file has no default export," it suggests that the issue is with the TypeScript understanding of the .scss module declaration. Here are a few things you might want to double-check: 1. Ensure that the modules.d.ts file is in the root of your project or at least in a directory that is included in your project's import graph. 2. If you have a deno.json or deno.jsonc configuration file, make sure there are no conflicting settings that might affect module resolution. 3. Confirm that there are no other TypeScript errors in your project that might be causing the language server to not properly recognize the .d.ts file. 4. If you're using an editor like Visual Studio Code, ensure that the Deno extension is active and that you're working in a Deno-enabled workspace. Since the advice provided here is not based on the Deno documentation, please double-check the accuracy of this advice. If the problem continues, it may be beneficial to seek assistance from the Deno community, as they might have more specific experience with this type of issue and could offer more targeted help.

Helpful Links: Using CSP | Fresh docs Deno 1.4 Release Notes You Don't Need a Build Step Deno Docs

Mqx•5mo ago

I checked all of that and it still does not work

Deno AI Helper•5mo ago

I'm sorry to hear that the issue is still unresolved. Since the advice provided here is not based on the Deno documentation and the issue persists despite checking the mentioned points, it would be best to seek further assistance from the Deno community. The Deno community is active and knowledgeable, and they may have encountered similar issues or have specific insights that could help resolve this problem. You can reach out to them through the official Deno Discord server, Deno's forum, or other community channels. When reaching out, provide them with all the relevant details, including the steps you've already taken, the contents of your modules.d.ts file, and the exact behavior you're experiencing. This will help others in the community understand your issue better and provide you with more targeted assistance.

Helpful Links: Deno deploy see error - Deno Troubleshooting deno.land downloads - Deno Page Not Found | Deno Docs Page Not Found | Deno Docs

Mqx•5mo ago

Okay I really don’t have an Idea how to fix this… Is someone here that I am allowed to ping who does know how to fix this?

Thomas•5mo ago

I'm not that familiar with lit and esbuild. But you are trying to compile a frontend with esbuild using Deno. And this seems to be successful (great :deno_thumbs_up:). The Deno linter is not designed for frontend. Bug maybe you can exclude the frontend code for the deno-linter (deno.json) ....

{
  ...
  "lint": {
    "exclude": [
      "ui/"
    ]
  }
}

{
  ...
  "lint": {
    "exclude": [
      "ui/"
    ]
  }
}

...and configure eslint for your frontend instead?

Mqx•5mo ago

That would disable linting for the whole file… I know that I can exclude files. I just want to disable the type checking/linting when I import a .scss file. Because deno-ts is trying to resolve the import and of course the .scss file is not valid ts/js and also does not have a default export. All that ESBuild does is it looks for .scss file imports inside a .ts file, than it resolves the import (transpiles the scss to css and puts that into the default export) and this default export can that be loaded as a normal string variable for deno and lit. This all works fine, but the linter does not like the default import of the scss

Thomas•5mo ago

If it works, you can simply set an ts-ignore.

// @ts-ignore
import style from "style.scss"

// @ts-ignore
import style from "style.scss"

Mqx•5mo ago

Hmm okay I try that Thanks for the suggestion This works but it is not a good solution to the problem 😅

Leokuma•5mo ago

@kt3k Sorry for pinging you. Do you happen to know another solution for this? Although for me that's enough TBH

kt3k•5mo ago

I don't think we have other solution than @ts-ignore. Looks like something need to be fixed (supported) in deno lsp and deno check

Thomas•5mo ago

I'm not sure, but Deno itself can't do anything with CSS or SCSS. Support for these files therefore seems rather inconsistent. And, on the other hand, do we still need SCSS today (in the age of CSS3)? And yes, ts-ignore is not a good solution, of course. Maybe you can go a different way instead. Here is an example of how you could use CSS programmatically (probably for jsx?): https://docs.deno.com/runtime/manual/advanced/jsx_dom/css Not sure if this is helpful 😅

Parsing and Stringifying CSS | Deno Docs

If you want to parse CSS to a abstract syntax tree (AST) then there are two

Leokuma•5mo ago

Agreed. That's why I think @ts-ignore is good enough. CSS already supports variables, nested rules and layers, and there are ways to manipulate CSS via JS without having to extend or configure a runtime in any specific way

Mqx•5mo ago

Currently we use SCSS for things like function and mixins. These features are still missing But I agree on the point to think about if we even need SCSS in the first place. But even then if I use plain CSS I would still have the problem that the linter would throw an error when importing the css in ts You also have the problem with other non js/ts files. Like SVGs or PNGs. These files also don’t have default export and so the linter also doesn’t like that. Fixing the problem that declare module would work would solve all the problems So you think it is a bug, that deno lsp does not check for the declare module?

kt3k•5mo ago

I don't think it's immediately a bug, but support of such situation can be added/suggested in Deno. Do you suppose the use of declare module syntax will resolve the above error? A feature request with a supposed example would be helpful

Mqx•5mo ago

Yes I think so. This would be the common solution in other projects Should I open an issue for a feature request for this?

Mqx•5mo ago

Looks like there is already an issue open similar to this: https://github.com/denoland/deno/issues/9541

GitHub

lsp picks up on ambient d.ts files · Issue #9541 · denoland/deno

.vscode/settings.json { "deno.enable": true, "deno.lint": false, "deno.unstable": false } foo.d.ts declare function hello(name: string): void; main.ts hello(123); foo....

Mqx•5mo ago

But I think the problem with declare module is slightly different

Mqx•5mo ago

I have opened an issue: https://github.com/denoland/deno/issues/23007

GitHub

declare module inside .d.ts does not get picked up by Deno · Is...

Hey, I currently have a problem when importing non js/ts files inside a js/ts file. deno-ts shows an error with non-resolvable imports for non-js/ts files. For example i have this index.ts files, s...