Почему стили не загружаются для Angular2?

Question

[Максим Иванов]

Пытаюсь загрузить стили, но они не подключаются, очень странно

import { Component, ViewEncapsulation } from '@angular/core';
declare var $:any;
console.log([`themes/${process.env.THEME}.scss`, 'app.component.scss'])

@Component({
  selector: 'my-app', // <my-app></my-app>
  templateUrl: './app.component.html',
  styleUrls: [`themes/beeline.scss`, 'app.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {

  constructor() {



  }
}

В итоге, так и не пойму, почему не подключается еще один sass файл



За загрузку стилей отвечает webpack:

// all css required in src/app files will be merged in js files
      {test: /\.(scss|sass)$/, exclude: root('source', 'style'), loader: 'raw-loader!sass-loader!postcss-loader'},

И так тоже лоадер не грузит путь, просто строка вставляется, падает ошибка

@Component({
  selector: 'my-app', // <my-app></my-app>
  templateUrl: './app.component.html',
  styleUrls: [
    './app.component.scss', 
    '/themes/' + process.env.THEME + '.scss'
  ],
  encapsulation: ViewEncapsulation.None
})

Answer 1

[iBird Rose]

`` -> ''

Comments

[Максим Иванов]

ну вот, вы меня опередили, я поправил это, но я хотел немного иначе ведь сделать
чтобы стили грузили без конкатенации

`themes/${process.env.THEME}.scss`

а выходит, это считается стилями, почему? почему sass-loader не считал сразу это строку как путь к файлу?

[Максим Иванов]

кстати, не работает

[Максим Иванов]

у меня есть переменная с названием темы process.env.THEME

но если использовать так

let pathTheme = './themes/' + process.env.THEME + '.scss';

@Component({
selector: 'my-app', //
templateUrl: './app.component.html',
styleUrls: [
'./app.component.scss',
pathTheme
],
encapsulation: ViewEncapsulation.None
})

опять же лоадер не работает и строка вставляется

[iBird Rose]

Максим Иванов: попробуй pathTheme тоже через '+ ... +' вставить

[Максим Иванов]

то есть? что-то не понял, я ведь так и сделал

[Максим Иванов]

styleUrls: [
('app.component.scss'),
('/themes/' + process.env.THEME + '.scss')
],

падает с ошибкой

Using typescript@2.0.10 from typescript and "tsconfig.json" from /home/splincode/Develop/ng2_webpack/tsconfig.json.

12% building modules 17/51 modules 34 active ...ode_modules/rxjs/symbol/observable.jsModuleNotFoundError: Module not found: Error: Can't resolve '.scss' in '/home/splincode/Develop/ng2_webpack/source/auth/app'