在 Visual Studio 代码中使用 tasks.json 来转译打字稿和 sass

Question

我想将 typescript 和 sass 分别转译为 javascript 和 css。目前运行这个 tasks.json 文件将我的打字稿转译为 javascript:

{
    "version": "0.1.0",

    // The command is tsc. Assumes that tsc has been installed using npm install -g typescript
    "command": "tsc",

    // The command is a shell script
    "isShellCommand": true,

    // Show the output window only if unrecognized errors occur.
    "showOutput": "silent",

    // args is the HelloWorld program to compile.
    "args": ["public/app/boot.ts"],

    // use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}

我只需要指定boot.ts，它会将所有.ts 文件转译为js。可能是因为我的 boot.ts 文件导入了我所有的 ts 文件。这是我的 boot.ts 文件：

import {bootstrap}    from 'angular2/platform/browser'
import {HelloWorld} from './hello_world'
import {TodoApp} from './todo_app'
bootstrap(HelloWorld);
bootstrap(TodoApp);

我想将代码添加到 tasks.json 文件中，将 sass 转换为 css。

这是我可以做的仅转译我的 sass:

的代码片段

{
    "version": "0.1.0",
    "command": "node-sass",
    "isShellCommand": true,
    "args": ["styles.scss", "styles.css"]
}

如何添加该代码片段以便它同时转换 sass 和打字稿？

此外，我是否希望在创建文件时将任何新的 sass 文件添加到 tasks.json 中的 args 数组？

Answer 1

您不能使用 tsc 命令执行此操作。请改用 npm。

package.json

{
  "scripts": {
    "build": "tsc public/app/boot.ts && node-sass styles.scss styles.css"
  }
}

tasks.json

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "silent",
    "args": ["-s", "run"],
    "tasks": [{
      "taskName": "build",
      "problemMatcher": "$tsc",
      "isBuildCommand": true
    }]
}

在 Visual Studio 代码中使用 tasks.json 来转译打字稿和 sass

Using tasks.json in Visual Studio Code to transpile both typescript and sass

css

sass

transpiler

typescript

visual-studio-code

package.json

tasks.json