Question

根据this blog，我正在尝试像这样编写我的组件。

@Component({
  selector: "navbar",
  template: require("./navbar.html"),
  styleUrls: ["./navbar.sass"]
})

我收到的错误消息是 navbar.sass 文件中的404（它与 navbar.ts 位于同一目录中）以及此文件中的错误消息（我不明白，也不知道该怎么做。）

未处理的承诺拒绝：无法加载navbar.sass;区域：;任务：Promise.then;值：无法加载navbar.sass undefined

我的Webpack配置文件中定义了以下加载器。

loaders: [
  { test: /\.png$/, loader: "raw-loader", include: [resources] },
  { test: /\.sass$/, loader: "sass-loader" },
  { test: /\.html$/, loader: "raw-loader", include: [application] },
  { test: /\.ts$/, loader: "ts-loader", include: [application] },
]

这些是来自包列表的加载器。

“node-sass”：“^ 4.5.0”，
  “raw-loader”：“^ 0.5.1”，
  “sass-loader”：“^ 5.0.1”，
  “ts-loader”：“^ 2.0.0”，...

修改

更详细的错误消息如下。

./源/应用/导航/ navbar.sass
模块解析失败：C：... \ Webular2 \ node_modules \ sass-loader \ lib \ loader.js！C：... \ Webular2 \ source \ application \ navigation \ navbar.sass意外的令牌（1：4）您可能需要适当的加载程序来处理此文件类型。 | div { |背景：#dd00ff; | border：1px solid＃ff9900; } @ ./source/application/navigation/navbar.ts 37：17-41 @ ./source/application/app.module.ts @ ./source/application/main.ts @ multi（webpack）-dev-server / client？http://localhost:3002 ./ source / application / main.ts

Answer 1

尝试嵌入样式：

@Component({
  selector: "navbar",
  template: require("./navbar.html"),
  styles: [require("./navbar.sass")]
})

在Angular 2组件中不能使用SASS样式

1 个答案: