CODEWITHSUNDEEP
angularjsangularnpmsass
Konrad Viltersten
Konrad Viltersten

Reputation: 39068

Can't use SASS style in Angular 2 component

According to this blog, I'm trying to write my component like this.

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

The error messages I'm getting is 404 on the file navbar.sass (it's located in the same directory as the navbar.ts) and also this one (that I don't understand and can't tell what to do with).

Unhandled Promise rejection: Failed to load navbar.sass ; Zone: ; Task: Promise.then ; Value: Failed to load navbar.sass undefined

I have the following loaders defined in my Webpack config file.

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] },
]

Those are my loaders from packages list.

"node-sass": "^4.5.0",
"raw-loader": "^0.5.1",
"sass-loader": "^5.0.1",
"ts-loader": "^2.0.0",...

edit

The more elaborated error message is as follows.

./source/application/navigation/navbar.sass
Module parse failed: C:...\Webular2\node_modules\sass-loader\lib\loader.js!C:...\Webular2\source\application\navigation\navbar.sass Unexpected token (1:4) You may need an appropriate loader to handle this file type. | div { | background: #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

Upvotes: 1

Views: 224

Answers (1)

kemsky
kemsky

Reputation: 15261

Try to embed styles:

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

Upvotes: 1

Related Questions