使用Visual Studio Code中的tasks.json来转换typescript和sass

时间:2016-01-09 01:33:15

标签: css3 sass typescript visual-studio-code transpiler

我想分别将javascript和css的typecript和sass都转换出来。在运行此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。

这是我能做的事情的代码片段,只是为了解释我的问题:

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

如何添加该代码片段以便将其转换为sass和打字稿?

另外,在创建task.json时,我是否想要将任何新的sass文件添加到args数组中?

1 个答案:

答案 0 :(得分:2)

使用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
    }]
}