Question

我正在Angular2中设置一个Visual studio code项目，其中包含Sass个样式的文件。但我似乎无法以正确的方式编译。

我正在尝试在我的src目录中编译（保存！）所有.ts文件和.scss。 .scss文件和.ts放在src（我的主）目录的子目录中。我将所有_.scss文件包含在一个.scss文件中，我想将其编译为一个css文件。我还想将所有.ts文件编译成一个.js文件（不缩小）

打字稿编译器

对于打字稿我使用的是Visual Studio代码的默认$tsc编译器

Sass编译器

对于Sass文件（.scss）我正在使用node-sass V4.5.1

设置

我在tasks.json中有以下设置：

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

我的package.json

中有以下代码

 "scripts": {
    "buildAndWatch": "tsc && node-sass --watch"
  }

我的tsconfig.json：

{
   "compilerOptions": {
    "target": "es5",
    "outDir": "build/",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "alwaysStrict": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "removeComments": true,
    "moduleResolution": "node",
     "typeRoots": [
      "node_modules/@types"
    ],
    "watch": true
  }, 
  "exclude": [
    "node_modules",
    "build"
  ]
}

问题

问题搜索者可以＆＃39; $ tsc＆＃39;处理node-sass错误或者我应该使用其他problemMatcher（如果是这样，我怎么能这样做？）
是否可以使用一个任务编译和查看我的.ts和.scss文件？

可以找到一个示例here，但是那个人不会观看并重新编译文件

几乎得到它今天我发现了如何观看和构建我的sass和我的打字稿。为此，我使用以下npm脚本：

 "scripts": {
    "Start:Development":"npm run Build:Typescript && npm run Watch:Sass",
    "Build:Typescript": "tsc",
    "Build:Sass": "node-sass ./src/assets/scss/main.scss ./src/assets/css/stylesheet.css",
    "Watch:Sass": "npm run Build:Sass && npm run Build:Sass -- -w"
  }

我打电话给Start:Development，剩下的就是npm。但是，我还有一个问题。 vs代码赢了两个手表。我可以将Build:Typescript和Watch:Sass彼此分开，但不能同时运行。如果我尝试那么只会编译我的打字稿。有人可以帮我这个吗？

Visual Studio代码构建并将两种打字稿视为sass

0 个答案: